224 private links
This is the critical mental-model shift. CSS properties on their own are meaningless. It's up to the layout algorithm to define what they do, how they're used in the calculations.
Here's an example which blew my mind: Did you know that the width property is implemented differently depending on the layout algorithm?
I didn't know 😱
Inline space under images are due to the Flow layout and its inline elements. It adds extra-space to make sure that inline elements, such as <img />
, don't negatively affect the legibility of the surrounding text.
There are a lot of layout algorithms in CSS, and they all have their own quirks and hidden mechanisms. When we focus on CSS properties, we're only seeing the tip of the iceberg. We never learn about really important concepts like stacking contexts or containing blocks or cascade origins!
Our intuition is the best tool we have. And when we start using CSS snippets without truly understanding them, it's only a matter of time until some hidden aspect of the layout algorithm throws a wrench into our gears, stopping us in our tracks.