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-inmargin
on all sides<figure>
has a defaultmargin-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 whatwidth
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>
elementDiagnosis: Not always an easy one to spot: deep use of
Inspect Element
Computed Styles is usually the best method.Solution: There are several options:
- Do a mini-CSS reset for the parent element, setting
font-size
orline-height
to 0. (Remember to reset thefont-size / line-height
back again for any child elements, such as<figcaption>
.) - Use
vertical-align: middle
on the inner inline element. (vertical-align: bottom
also works.) - Set the inner element to
display: block
. - 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.
- Do a mini-CSS reset for the parent element, setting
- 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
to0
for the containing element (and resetting it for child elements). - Cause 5: Entities
-
Usually inserted by a WYSIWYG editor like DreamWeaver, or apps with HTML export, such as Microsoft Word.
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 entities.
Solution: Remove
entities using a Find-and-Replace tool, replace them with actual spaces, or set them tofont-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.