CSS Basics: The Display Property — Pt. II
So last time we touched on the basics of the display property but there a lot of more esoteric values for the display property that I’ve come across that I’d like to explore.
The first value that I’d like to look at is the run-in value. This isn’t widely supported at all at the moment. It’s essentially only supported in IE. The run-in value makes the element it’s styling inline and aligns it with the following block elements so that it looks like a header to a block element. You can see examples of this here and here. You can pretty much achieve the same effect if you make the element inline and then insert it in between your block element tags.
The next value I’d like to talk about is flow-root. This value is actually quite useful since it fixes a common problem we have with floats. The only problem is that it’s currently not supported by IE. When you have a float inside of a container and it’s larger than the container, normally, if you don’t apply the clearfix hack, your float will just overflow outside of the container. A better alternative to the clearfix hack is using flow-root.
If we add display: flow-root; to the container our float gets incorporated because we created a new block formatting context. A block formatting context is essentially a mini-layout. In this case, the layout of our container and everything in it is the block formatting context. When we floated the div, we took it out of our container block formatting context so it stopped respecting the borders of our container div. In order for us to reverse this we create a new block formatting context using flow-root which would incorporate the float.
The next three values I want to just quickly go through are: table, ruby, and list-item. These display values pretty much make whatever element you’re styling into its HTML counterpart. Generally these aren’t very useful.
While I was going through these display values I learned about the <ruby> HTML tag. It’s a tag used for displaying the pronunciation of certain East Asian languages such as Chinese and Japanese. If you’re familiar with either of those you’ll know that a character’s pronunciation is not always evident.
The last two values I want to look at are none and contents. When you set the display property to none the element is not shown in your layout and takes up no space (unlike with visibility: hidden; which preserves the space the element would take up). The contents value hides the element but shows all the content/children in the element.
display: contents;"
Now let’s see what happens when we add display: contents;.
You can see that we’ve lost all the background and border of the container. This is similar to doing this:
Except we know that an element with visibility: hidden; still takes up space in the layout. So this method is similar to the contents value but there is no other actual equivalent. If we tried to do this with the none value we just get a blank screen since display: none; hides not only the element but also its children. If we try this:
We just get a blank screen since both the container <div> and its child <p> are not displayed. This contents value is quite useful when we use CSS Grid or CSS Flex. Here’s a great explanation of some uses for this nifty little value.
That ends our look at the display property in CSS. Hopefully these two blog posts were helpful. It’s always interesting to dive a little deeper into something you use a lot. Thanks for reading, and till next time!
