6 ms·
The amount of ignorance around CSS is astounding. CSS doesn’t control how a page looks, it controls how the browser ”flows” a sequence of boxes and text onto t
by eurasiantiger 6y ago
The amount of ignorance around CSS is astounding.
CSS doesn’t control how a page looks, it controls how the browser ”flows” a sequence of boxes and text onto the page one by one.
Block boxes are 100% wide, grow to fit their content, and stack vertically with other boxes.
Inline boxes grow to fit their content, and flow into the same rows with other inline content. They cannot have margins or paddings like block boxes.
Inline-block boxes flow with other inline content like inline boxes, but can be styled like block boxes.
Never have different types of boxes directly as siblings. Instead, create block wrappers for any inline content. This alone saves a lot of headache.
- olau 6y agoSome of these are self-inflicted wounds, though. For instance, why do you have to declare inline boxes to be inline-block before you can add padding to them? Perhaps just because of backwards compatibility, which could perhaps have been solved a bit more elegant.
- eurasiantiger 6y agoYou’re right; inline-block is a later addition. It doesn’t change the mental model, though. For example, it makes perfect sense for an empty inline-block to get aligned to the text baseline, while an inline-block with text also gets aligned to the text baseline. That is precisely what ”vertical-align: baseline” means: align this element’s line of text to the surrounding baseline. If the element doesn’t contain a text node, the inline-block does align correctly, but by default does not have a size unless explicitly specified. And if there’s something in CSS that is to be avoided unless necessary, it’s specifying things explicitly.