HTML, CSS, and JavaScript are known for having various quirks and unsuspecting behavior causing developers to jump through hoops, climb mountains, and perform Houdini-esque magic tricks to fix them. I made a list of six solutions to common head-scratchers that I’ve run across while dabbling in the DOM, so you won’t have to.

This is the first of a three part series. We will begin by tackling two fundamental concepts that exist in HTML and CSS, which may help you reason out solutions to tricky scenarios that exist in the Wild Wild West that is front-end development.

Block Formatting Context

Block formatting context is a fundamental component to how elements in web pages are rendered. It describes how they stack and interact with each other resulting in the final visual output of the webpage.

Multiple block formatting contexts can exist on a single page. A new block formatting context is created in one of the following cases:

1. Absolutely positioned elements
2. Floated elements
3. Inline-block elements (display: inline-block)
4. Block level elements where their overflow property has a value other than its default of visible (overflow: auto, hidden, scroll, etc.)
5. Table cells or elements with their display set to table-cell (display: table-cell)
6. Table cells or elements with their display set to table-caption (display: table-caption)

Understanding block formatting context may not be intuitive at first without a proper use case, but it will help make sense of several common quirks in CSS where elements do not align according to the developers expectation: margin-collapsing, multi-column layouts, non-text-wrapping floats, etc.

Below, we will address a common quirk that you may run across due to block formatting context known as margin collapsing. The big take-away from this section is that if you ever come across a problem pertaining to layout rendering such as margin collapsing or improper alignment due to floated elements, one solution is to try to create a new block formatting context by following one of the rules above.

References

1. W3C, Block Formatting Context, https://www.w3.org/TR/CSS2/visuren.html#block-formatting
2. Ritesh Kumar, Understanding Block Formatting Contexts in CSS, https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
3. MDN, Block Formatting Context,
   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Margin Collapsing

Margin Collapsing is one of those CSS head scratchers that I mentioned in the block formatting context section. I discovered this quirk while giving a live presentation on web design for beginners. I was telling the audience how simple it was to create a nice layout with a background image in the header, a navigation menu that sits on top push a few pixels from the top of the web page with CSS margins. Below is an example of this scenario, which you might run across as well.

The goal was to move the navigation menu down half the height of the header background in order to appear vertically centered (50px).

.navigation {

margin-top: 50px;

}

The above code-block is what the “obvious” choice of CSS would be, but guess what the actual result was:

Actual

Expected

The actual result is due to the CSS rendering quirk known as margin-collapsing. Simply put, margin collapsing is when the top and/or bottom (vertical) margins of two elements in the same block formatting context merge as one. The W3C lists all of the scenarios in which margins collapse, but there are two major cases that you will most likely run across: adjacent siblings and parent-child block elements. In our case above, we are dealing with the latter. There are multiple fixes to prevent margin collapsing. I will list a few, but there you can find more by following the links in the reference list below.

The overall solution is to break one of the cases that causes margin-collapse such as creating a new box formatting context, which separates the parent’s context from the child’s. The full list can be found in the W3C’s section covering margin collapse.

Margin-Collapse Cases

1. The top and bottom margins of in-flow siblings.
2. The top and bottom margins of a parent and it in-flow children.
3. Empty blocks if there are no border, padding, height, or min-height that separates a blocks top and bottom margins

Solutions

1. Use padding in either the parent element or child element instead of margin on the child element.
2. Set the parent’s to overflow value to something other than visible (hidden, auto, scroll, etc).
3. Set either the parent or the child’s position value to absolute (position: absolute)
4. Set either the parent or child element’s display value to inline-block (display: inline-block)

References

1. MDN, Mastering Margin Collapsing, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
2. Adam Roberts, Collapsing Margins, https://www.sitepoint.com/web-foundations/collapsing-margins/
3. Joe Seifi, Understanding & Taming Collapsing Margins in CSS, http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
4. W3C, Collapsing Margins, https://www.w3.org/TR/CSS2/box.html#collapsing-margins