CSS Things That Don’t Occupy Space

CSS Things That Don't Occupy Space In most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually.

In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further styles added, will occupy the space below or beside the green box, outside of those set boundaries.

But not everything on an HTML page occupies space that is honored by other elements. I thought it would be interesting to list and describe all the things in CSS that don’t occupy this kind of physical space in an HTML document.

Absolutely Positioned Elements

This means any element that is set to position: absolute or position: fixed. These elements are taken out of the document flow, so elements that appear after them in the source order will not flow around or below them. So basically, other elements behave as if the absolutely positioned elements are not even there.

Offset Values for Relatively Positioned Elements

Unlike absolutely positioned elements, elements with position: relative do occupy space. But the offsets that you specify on relatively positioned elements using top, right, bottom, or left, do not occupy space. This might seem a bit odd at first, but look at this example:

http://jsbin.com/areyus/1/edit

The pink box follows the blue box in the source order, so naturally, the blue box’s occupied space is not available. So the pink box drops below. Next, the fact that the blue box is relatively positioned and then offset, causes the blue box to move. But this offset (20px from the top and 20px from the left) does not affect the position of the pink box. This is because the offset space on a relatively positioned element does not occupy any space.

Outlines

The outline property is very much like the border property, the difference being the fact that outlines don’t add to the occupied space of the element on which the outline is applied. This is why web developer tools can use outlines to highlight elements for debugging purposes, without causing elements around it to move or reposition themselves.

Look at this demo:

http://jsbin.com/inesuz/1/edit

Notice that the blue box has a 50px solid yellow outline. The outline overlaps the pink box below it, rather than pushing it down, as would happen if you change the outline to a border.

Offsets Caused by Transforms

Transforms, in many ways, have similar behaviour to relatively positioned elements. The most obvious types of transforms that do this are translation transforms, declared using the translate() function.

Translating an element using the transform property will cause the transformed element to reposition itself, pretty much the same way discussed above under relative positioning. This means that the original space occupied by the element will remain intact, as if the element hasn’t moved. But the offset created by the translation does not occupy space.

Similarly, when an element is rotated, skewed, or scaled, the original space occupied by that element is honored, but any areas covered by offsets due to any of these transforms will not affect the flow of other elements around.

Shadows

Box shadows and text shadows both fall under the category of elements that don’t cause reflow around them, thus not occupying any actual space in the document. When shadows are applied, as is the case with all of the other features discussed in this post, they don’t affect the position of any surrounding elements.

In the case of shadows, this is actually significant when you’re trying to center an element either vertically or horizontally. If an element has a shadow on a specific side and not the opposite side, this would make it appear not to be centered. This is because something like “margin: 0 auto” does not take into consideration the size of the shadow when centering the element, so you might have to add an opposing margin or something if you think this affects the aesthetics.

Other Miscellaneous Items

Some other notable things that are created by means of CSS but that don’t occupy space include:

WebKit Reflections

IE-only proprietary filters

text-decoration

Elements with display: none, which is different from elements with visibility: hidden, the latter of which do occupy space

What About Overflows?

One important thing that should be pointed out here is that even though these features discussed above do not occupy space in the document, some of them will cause scrollbars to appear if they are positioned in such a way as to render outside a parent element.

Something like a text shadow would not do this, but a transformed or relatively positioned element would. So although the offsets created by transforms or positioned elements may not take up space or affect surrounding elements, they will cause their parent element, or even the window, to create necessary scrollbars — unless of course the parent element in question is set to overflow: hidden.

“Occupy Space” — Maybe Not The Right Phrase?

The final thing I’ll say here is that, technically speaking, the phrase “doesn’t occupy space” may not be the best choice here, even though I’ve used it throughout this post.

When the spec discusses this sort of thing, it usually uses a phrase like “doesn’t cause reflow”. But I’ve tried to write this primarily with understandability in mind. I think it’s easy to understand what I mean when I say that something “doesn’t occupy space”, so in no way am I implying that my discussion here is semantically correct. The concept is really more important than my choice of words.

Is there anything I’ve missed here? Comment and I’ll add/correct.