The display property is perhaps one of the most important properties in CSS.
Every element in an HTML document is treated as a box, and itâs the display property that determines how these boxes will be shown.
There are a large amount of values that can be used with this property. However, only some of them of commonly used, weâll be focusing on these:
inline
inline-block
block
flexbox
grid
none
table
Inline
The inline
value is the default for every element in CSS.
display: inline;
A neat way to visualize inline
is to think of a paragraph containing some words in wrapped in bold <b>
or <span>
tags:
Here the <span>
element has a blue border applied, and the flow of text isnât broken. It sits inline
with the text.
We can apply padding and margins to inline elements, however the surrounding elements will be pushed aside in a horizontal direction (not vertical). Also, height
and width
are ignored by inline
elements.
Every HTML tag is displayed inline unless otherwise specified, with a few exceptions such as div
, p
and section
, which are set as block
.
Inline-block
display: inline-block;
An element with inline-block
is very similar to inline
, however the width
and height
are able to be applied as specified.
Block
display: block;
As mentioned, a number of elements are set to block
by default. They are layout elements, such as <div>
, <section>
, and <ul>
. Also text elements such as <p>
and <h1>
.
Block level elements are stacked one after each other in a vertical direction. By default each element takes up 100% of the page width.
If specified, the values assigned to the width
and height
as well as margin
and padding
are all adhered to.
Flexbox
The display
property is also used when working with flexbox:
display: flex;
Check out the complete Flexbox guide to learn more about this method.
Grid
When using CSS Grid, we also set the display property:
display: grid;
Check out the complete CSS Grid guide to learn more about this method.
None
display: none;
We use display: none
to make an element disappear.
Itâs still loaded in our HTML, just not rendered visible by the browser.
Table Values
display: table;
With the advent of modern layout methods such as flexbox & grid, the <table>
HTML element is a bit of a relic.
However, we could use a number of display values to get non-table elements to behave like table elements, if weâre so inclined:
element {
display: table;
display: table-cell;
display: table-column;
display: table-row;
display: table-caption;
}
We could use this like so:
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Cell content.
</div>
</div>
</div>
Itâs not a common technique as it makes for messy markup, however it may have the odd use-case.
Related Posts:
A little about me..
Hey, Iâm Tim! đ
Iâm a freelance business owner, web developer & author. I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. Check out my Complete Guide to Freelancing if you'd like to find out more.
While you're here, you can browse through my blogs where I post freelancing tips, code tutorials, design inspiration, useful tools & resources, and much more! You can also join the newsletter, or find me on X.
Thanks for reading! đ