Part of the Page Layout Reading List

Cet article est également disponible en français

There are few problems more exasperating in front-end design than dealing with unexpected gaps in web page elements. Determining the cause of an extra few pixels inside a container, or the appearance of space between elements that are meant to exist seamlessly side-by-side, can soak up a great deal of developer’s time and effort.

To help, here’s a short list of the six most common causes for gaps, and their solutions:

Cause 1: Default CSS

Web developers tend to forget that HTML documents are designed to be readable without any stylesheets applied. This means that the browser applies default CSS to every element, which is then overwritten by site styles. Sometimes, untreated default styles - known as the user agent stylesheet - work in your favour: the vertical space between paragraphs, the space under headings, are all default values. Sometimes the values run counter to your design. The most common defaults that become a source of frustration include:

  • <body> has built-in margin on all sides
  • <figure> has a default margin-left value
  • list elements are all pushed in from the left with a margin
  • heading elements have a default margin-top value that can cause spacing issues, particularly if the heading is the first element in a container.

Diagnosis: Find the specific cause of the problem with the browser’s Inspect Element tool. Pay particular attention to styles inherited from the user-agent stylesheet.

Solution: Use a CSS Reset, targeting the specific property for that element. This is usually applied a site-wide reset written at the start of your stylesheet.

Cause 2: Wrong Box-Model

By default, adding padding to an element increases the size of its containing box, no matter what width you have applied in your CSS.

Diagnosis: Discussed in depth in my article on box-sizing.

Solution: Apply a new box-sizing model to the entire site. My preferred solution: 

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

It’s important to do this early in site development: otherwise you’re likely to build the entire site with the default box-model behaviour; adding this solution at that point can create more problems than it solves.

Cause 3: Inline Element Inside A Block Element

Inline elements will reserve a tiny amount of space beneath them. While this behaviour is usually your friend, it can be a problem when they are displayed inside an element with display: block. Perhaps the easiest place to see this is in a <figure> element with a border, which does not yet have a <figcaption> inside it:

Note the extra space between the picture and the border at the bottom of the <figure> element

Diagnosis: Not always an easy one to spot: deep use of Inspect Element Computed Styles is usually the best method.

Solution: There are several options:

  1. Do a mini-CSS reset for the parent element, setting font-size or line-height to 0. (Remember to reset the font-size / line-height back again for any child elements, such as <figcaption>.)
  2. Use vertical-align: middle on the inner inline element. (vertical-align: bottom also works.)
  3. Set the inner element to display: block.
  4. Float the inner element left or right.

I often refer to this technique as “sucking the air out of an element”, like vacuum-sealing food, as that’s essentially what it does.

Cause 4: Inline-Block Preserving Spaces

As I’ve discussed in depth, using inline-block preserves spaces (including rendering carriage returns as spaces).

Diagnosis: Realize where you’re using inline-block!

Solution: A number of possibilities, from physically removing carriage returns and whitespace in the affected code to setting font-size to 0 for the containing element (and resetting it for child elements).

Cause 5: &nbsp; Entities

Usually inserted by a WYSIWYG editor like DreamWeaver, or apps with HTML export, such as Microsoft Word. &nbsp; is an HTML entity that represents “non-breaking space”, and is most often found in lines of text and otherwise empty table cells.

This can also occur with other elements, usually for the same reasons: a mis-used WYSIWYG tool has transposed an element from one place in your code into an unexpected area.

Diagnosis: View Source in a browser or fully-fledged HTML editor to find the occurrence of &nbsp; entities.

Solution: Remove &nbsp; entities using a Find-and-Replace tool, replace them with actual spaces, or set them to font-size: 0.

Cause 6: Margins & Margin-Collapse

“Margin collapse” sounds like a behaviour that should work in your favour in regards to removing gaps, and it usually does. margin-collapsing is a little complex to explain in the context of this brief list, so it will be the focus of another article coming up very soon. For right now, recognise that positive margin values for statically positioned elements always push away other content, creating gaps. These margin values may be inherited from other elements.

Diagnosis: Recognize the purpose and behaviour of margin, and the trickiness of margin-collapse rules.

Solution: Reduce margin values appropriately; in the case of margin-collapse working against you, use padding as an alternative to margin, or add a border on the affected side.

This list is broad, but incomplete: there are always edge-cases to take into account. If you feel I’ve missed an important one, please add it in the comments below!

Photograph by Louis du Mont, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.