Collapsing margins

Let’s see if we can explain this – and get it out of the way…

First off, check out this situation. What’s really happening? We’re not going to go into that. But here’s a naive diagram investigating. Check out that first line of text.

It’s like the blocks used for printing, right? They have space above and below to account for the defenders and ascenders.

And, they have space between the lines. This is where they’d shove the extra lead slabs to create the space in physical printing. But digitally, it can be expressed in negative numbers too and do all sorts of fun things.

Some basic HTML

HTML

<h2>This is an example heading at 2rem in theory</h2>

<p>This is a sentence set at 1rem which is most often 16px when you're viewing a website with the default settings and you aren't zoomed in.</p>

<p>This is a sentence set at 1rem which is most often 16px when you're viewing a website with the default font-size settings and you aren't zoomed in.</p>

A heading and some paragraphs.

Here is what it looks like when printed in some default fashion.

Note the default spacing here.

This should show it a little better. Not how the Heading has a margin on the bottom – and the Paragraph has a margin on the top / but they combine and – really, the bigger one is the one that gets put in place.

Here’s another colored version more like the dev tools.

You could put margins around everything but it would be a mess – and you’d have to keep track of a lot of numbers and well, put them on everything.

Instead, you could put some padding around the parent.

And if you got rid of the default “collapsing” margins, you could put an explicit margin-top on each downstream element instead. This would keep it nice and clear what should be happening.

This is what has worked well for us! Give it a try and report back.

Introduction

Some basic HTML