Every element on a web page is essentially a box that can be shaped and styled by CSS. Fundamentally, a web page’s overall content is these boxes arranged according to a grid-like style, with the rows and columns of the grid being adjusted to suit the user’s viewport.
I’m going to cover the most commonly used (and, in terms of browsers, the most supported) values of the
display property in CSS and give a few working demonstrations of what happens when we use them.
When elements have inline styling, they are set to be conservative with their space and they only use as much as they need. Elements such as
<b> wrap around text without starting new lines because they are inline elements. As such, when displayed in a browser window, bits of text styled using
<span> will be displayed side by side, one after the other. Vertical styling can’t be used, so margin and padding will only have horizontal effects. Width and height cannot be defined, either.
Here’s an example. I’ve got three
<span>elements with a bit of padding set for each of them, and they display with their default inline behaviour like this:
Instead of being conservative about how much space they use, block elements will instead always require a new line and their width is 100% by default. Elements that use
display: block by default are
<ul>. With these elements, the height and width can be set, as well as the vertical properties of padding and margin. Text styled using
display: block will no longer display side by side but instead vertically, down the page.
Using the previous example, I’ve set my three
<span> elements to
display: block. The resulting behaviour is that each of them now starts on a new line. I’ve added a bit of a margin at the bottom of each one, so that there’s some vertical space between them, too. I’ve also specified a width in pixels, however, it’s important to keep in mind that the default behaviour is 100% width.
A combination of the two, inline-block displays the characteristics of both block and inline elements. Elements with this property are displayed side by side, as with inline elements, but their width and height can be defined, as well as other vertical properties. Alternatively, we can think of these elements as block elements that don’t take up 100% width or start on a new line.
Here’s what happens when I set my previous
<span> elements to
display: inline-block. They behave like inline elements in that they appear one after the other, however, I’ve also been able to set the width of these elements, as I might do for a block element.
For a working example of where inline-block was useful, take a look at the Omni blog’s pagination. For this, I needed the elements to be displayed using an inline style, with the elements shown one after the other on the same line, but I also needed to define the width and height of them. This was the result:
This property can come in useful when you’re designing for different devices, for example, there may be a column you want visible when the page is viewed with a desktop but not when viewed with a mobile. With
display: none, the element will be removed from the page entirely, though it will still exist within the mark-up itself (it should also be noted that setting an element to
display: none will also remove it from the accessibility tree; which means that this element (and all its children) will no longer be seen by screen reading technology).
If we have our three boxes and we use
display: none on the centre one, the one on the right will shift to take its place. In contrast,
visibility: hidden does not remove the element entirely, it only makes it ‘invisible’. With our three boxes, the one in the centre would be invisible but it would still take up space on the page. Here’s what happens with my three
<span> elements when I style the centre one with
display: none, on the other hand, makes the element behave as though it’s been completely removed, and the element on the right shifts left to take up the space.
This is just the tip of the iceberg when it comes to using the display property, however, the fundamentals I’ve covered are important to understand. There are other values display can take, for example, flex, grid and table, but I won’t cover them here. A complete guide to the grid display can be found over on CSS Tricks here https://css-tricks.com/snippets/css/complete-guide-grid/ as well as a complete guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. There’s also a really handy online tool for seeing how flex works in your browser, where you can see precisely what each parameter does: https://flexbox.help/. For browser support, consult Mozilla’s table here: https://developer.mozilla.org/en-US/docs/Web/CSS/display/.