(click anywhere to close)

[CSS3] Display

category: Website | course: CSS3 | difficulty:

Until now, we’ve viewed everything as a strong and independent box with lots of space around it. But that’s not how most elements behave. Websites often have a few big containers (such as header, footer, sidebar, content), and the rest of the elements is displayed in a different way.

In the HTML5 tutorial, we made a distinction between block and inline elements when we talked about <div> and <span>, and this is the part where CSS continues on the subject. Arguably, it’s the most important property there is, because CSS is all about displaying stuff. Not surprisingly, the property to use is display.

A block-level element has a fixed size, regardless of the content. It doesn’t allow other elements next to it, and pushes those below itself. A block-level element is useful, because it is clean and consistent in behaviour, but it’s hard to work with them once you get to the details of a design.

That’s when inline elements come into play. Inline elements can’t have their width and height set – those are determined by their content and surroundings. Their placement is also determined by what’s around it, as they will try to be in line with the text or other elements.

While those two cover most cases, there will be times when you want a block element next to other elements instead of in its own space, and there’s a compromise for that: inline-block.

div {

span {

.specialElements {

Setting the property to none means the element has no effect on the layout. It doesn’t remove it from the page.


In the HTML5 tutorial, I kept telling you to keep mark up and layout separate. To make this easier, CSS has a way of simulating a tabular layout, without actually using <table> tags. This tabular layout is created by setting the display property of a group of elements to certain values.




Simulates the behaviour of the <table> element


Simulates the behaviour of the <tr> element


Simulates the behaviour of the <td> element.


Simulates the behaviour of the <caption> element


Simulates the behaviour of the <col> element


Simulates the behaviour of the <colgroup> element


Simulates the behaviour of the <thead> element


Simulates the behaviour of the <tfoot> element


Simulates the behaviour of the <tbody> element

The last five are actually not that useful, as those exist in HTML5 mostly for structure and not design or layout. But the first ones can make it very easy to create a responsive design, though they can be tricky.

div {

div > div {

div > div > div {


You can also use the value list-item to make an element look like a list item, which means it has a bullet in front and is slightly indented.

The value run-in is equal to block or inline, depending on what fits best in the context. It’s decided by the browser, which means it isn’t very consistent, and I recommend not using it.


The last two values it can obtain are flex and inline-flex. Those signal the start of a flexbox environment, which is a very useful but much larger topic than is necessary to discuss now. It will be elaborated on in the Flexbox chapter, much later in this course!


The last thing to worry about now, is what to do if the content is bigger than its parent. When the content overflows the container’s dimensions, you can use the overflow property to control it. The default value is visible, which means nothing is done about it.

To hide everything outside of the box, use hidden. To make the element scrollable, use scroll.

If you want to specify different instructions for the width (x-direction) and height (y-direction), use overflow-x and overflow-y.

div {
Test your knowledge with the quiz!
What happens when you use overflow:hidden;?
You make an element display as if it were a table
You make an element display as if it were a table cell
You make content that's outside the element's border invisible
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk