| Just reading the first section, I'm already annoyed and frustrated. It does the same thing as every CSS explanation I've ever read of explaining what but not why. Things that confuse me immediately: * The article starts by saying there are two types of boxes. OK. Boxes have an inner and an outer display type. Already confused. Is this in addition to the two previously mentioned types? Does a box have the following: (type, inner display type, outer display type)? "First, we will explain what we mean by block box and inline box". Err what, you haven't mentioned those yet. Are they a type, an inner display type, an outer display type, or all of the above? "If a box has an outer display type of block, it will behave in the following ways". So block/inline are types of inner/outer display types? What is going on? * Why does there need to be two distinct types of element, which seem to be randomly applied to different elements (divs are block, spans are inline)? * Why are they called "block" and "inline" when those words don't seem to relate to their behaviour at all? * Why does inline silently ignore width and height? * What is an "inline direction" * What does breaking onto a newline mean, and why do I care? Why not show a diagram? Then my ADHD brain loses interest and concedes I will never understand. |
“Work was hard so I quit.” isn’t going to generate much sympathy from the people who put in the effort to learn this stuff.
If you really want to understand CSS, read “CSS: The Definitive Guide” cover to cover. I’m not kidding. Take notes and write code using every single property. Read the Flexbox and Grid chapters TWICE.
Oh, and if you’re upset about the distinction between inline and block elements just wait until you hear about the inline-block display value.. Which, coincidentally, will answer your question about inline heights.
Every browser on the planet makes use of CSS. Every non-trivial website uses CSS. It works. It’s not a toy. Approach it as you would any other advanced technology.