The learning is coming fast & furious these days. I’m only on my sixth TIL post though so Vin Diesel’s still got me by two movies and two billion dollars if I’m rounding up.

This one’s a quickie! And totally makes sense but I never use CSS much these days and if I do it’s usually a CSS framework.

Like the title says,

Relative margin & padding are calculated from the parent’s width!

That’s a dense title. So say you have an HTML element that contains children, i.e.

And we want our <p>s margin and padding to always be relative to the parent, so we add a style of

The 2%, which is for top, right, bottom, and left margin and padding, is calculated based on the width of the <article>. You’d think that the margin-top/bottom and padding-top/bottom would be calculated based on the height of the parent.

It’s easy to see why if you imagine adding more <p>s to the <article>. The height of the <article> is going to change every time another <p> is added and, depending on the length of the article could be very large. We don’t want our spacing between paragraphs to grow as more paragraphs increase the article’s height. But we may want it to change as the width of the parent element changes, most likely in response to the width of the viewport changing.

Until next time!