CodeinWP CodeinWP

CSS Things That Don’t Occupy Space

CSS Things That Don't Occupy SpaceIn 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.

Absolutely Positioned

JS Bin demo

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:

Relatively Positioned

JS Bin demo

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 example:

Outlined Element

JS Bin Demo

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.

Transformed Element

JS Bin Demo

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.

Shadowed Element

JS Bin Demo

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 are 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 may cause scrollbars to appear if they are positioned in such a way as to render outside a parent element, or outside the window.

Something like a text shadow would not do this, but a transformed or relatively positioned element might. So although the offsets created by transforms or positioned elements may not take up space or affect surrounding elements, they may 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.

14 Responses

  1. Lavabeams says:

    Nice article as always. As you said “doesn’t occupy space” probably isn’t the best choice technically speaking, however this is what I will be using from now on when explaining reflow to others.

  2. Larry Botha says:

    I’ve wondered for a while how dev tools displays margins etc without reflow or backgrounds… such a simple solution with outline! Can’t believe I didn’t see that.

  3. virtualgeoff says:

    Nice article.

    Agree that “doesn’t occupy space” is not quite right. I suggest “doesn’t affect the flow” or “takes space outside the page flow”.

  4. Francisc says:

    Thanks, it was a good read.

  5. Caparico says:

    Thank you. It was a good idea to back your claims with some Jsbin visual examples.

  6. raj nataraj says:

    Thanks for an informative post, I have shared this with my colleagues.

    Look forward to future ones.
    thanks
    raj

  7. Ricky says:

    Best explanation on this topic I ever came across. I could never understand the difference between absolute and relative positioning, now I do very clearly. Other contents are also easy to understand. Well done really!

  8. YourFriend says:

    Indeed very helpful article, just like your other posts. I followed you back here from a site called teamtreehouse dot com. You wrote an article about CSS Positioning there and I really liked it.

    Thanks for sharing this helpful info :)

  9. Matt Johnson says:

    Thanks for the tips! They are actually help me a lot when working on my site.

  10. reda laoubi says:

    Best explanation on this topic I ever came across. I could never understand the difference between absolute and relative positioning, now I do very clearly. Other contents are also easy to understand.

  11. Thank you. It was a good idea to back your claims with some Jsbin visual examples.

  12. Boris says:

    Great explanation, one question though, can you make the offset of transform occupy space (cause reflow)? If so, how?

    • No, I don’t believe there’s a way to do that. I mean, I suppose you could calculate where the element is positioned (See this post for how to do that) and then re-render the elements on the page, but they still wouldn’t be in flow necessarily. It would be almost impossible to do it, or else extremely difficult and inefficient.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).