HTML and CSS — Margin

More often than not, developers and non developers alike believe HTML and CSS is easy. In revisiting the fundamentals of HTML and CSS, there are important foundational characteristics to note, which may be surprising to even very experienced frontend developers.

Sure, there are aspects of HTML and CSS that can be relatively easy to learn at first with a “monkey see; monkey do” approach. The feedback one receives in writing HTML / CSS is instant. Just reload the browser and gaze at your yellow square on the page. Now let’s center the yellow square. See! Easy.

Margins collapse

Margin is empty space. Margin pushes elements away. However, margins on adjacent elements can merge. If for instance there’s two elements stacked on top of each other — display block. Let’s say the top element adds 50 pixels of padding on it’s bottom perimeter and the bottom element adds 50 pixels of padding on the top perimeter. One may be tempted to think that these two elements have created 100 pixels of empty space between themselves. This assumption is incorrect, however. In fact there would be only 50 pixels of distance between these two elements because margins collapse onto of each other. Other margins from other elements, when they meet, their margins do not push each other away. Their margins collapse on top of each other.

Here’s a code pen for demonstration.

Margins merge

To add more complexity to merging margins, let’s take the same about example, keeping the same margin values — 50 margin bottom pixels on the top element and 50 margin top pixels on the bottom element. Now let’s say on the bottom element we add 50 more margin top pixels, giving this element 100 margin top pixels. The extra 50 margin top pixels on the bottom element will breach its neighboring element, spilling over its neighbor and potentially pushing other elements above its neighbor away. The margin in this case, carries over to other elements impacting elements relatively far away from the element with margin in question. Needless to say, this can create a lot of confusion. A developer could be scratching their head, “why is this top margin effect 3 elements above the element with the top margin and not just its immediate neighbor?” The answer is, margins merge.

Here’s a Margin Spill Over code pen showing how margins surprisingly can merge into other elements.

Margin bottom is safest bet

So what do we do? The answer: try not to use margin to avoid the confusion of margins merging into other elements and margins collapsing onto each other. If you must, try to only use margin bottom on your element and take other measures to create space between elements, such as padding.

Padding Resolves Margins Merging

In order to safely and simply space elements from each other we should use padding. A parent element generally speaking will have a background color set. We can add padding to the parent to keep the parent and the child’s margin from merging with each other. In other words, padding on the parent will create a buffer between the margin of the child and the margin on the parent itself. The buffer that the parent provides helps prevent the margin of the parent and the margin of the child from touching each other so they do not merge.

Here’s a code pen demonstrating how padding can create space between the container and its child.

The Relationship between an element’s font and margin

Heading and paragraph elements have a margin top and bottom by default. The values of margin top and bottom for these elements equals their font size respectively. If you make the font size of one of these elements bigger, the margin above and below will increase with the font size. However, these elements have a margin left and right of zero.

In the next blog post this author will expand on important characteristics of inline and block elements. Thank you for reading.