The display
property and its values are very important to understand because they have a pretty big impact on how elements interact with each other on the page and how they are rendered.
Let's go over the main values for display
, using this HTML document as our base:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
div {
background-color: blue;
}
span {
background-color: lightblue;
padding: 0 0.5rem;
}
</style>
</head>
<body>
<div>
<span>How</span>
<span>cool</span>
<span>is</span>
<span>Sabe?</span>
</div>
</body>
</html>

Display: None
This is the easiest one. If you set the display
value to none
, it will simply not appear at all.
<!DOCTYPE html>
<html>
<head>
<title>Display: None</title>
<style>
div {
background-color: blue;
}
span {
background-color: lightblue;
padding: 0 0.5rem;
display: none;
}
</style>
</head>
<body>
<div>
<span>How</span>
<span>cool</span>
<span>is</span>
<span>Sabe?</span>
</div>
</body>
</html>

Visibility
Another way to accomplish a similar, but not exact, effect as using display: none;
is to use the visibility
property. When you set the value to hidden
, it also causes the element to disappear.
The difference is that using display: none
the browser will act as if the element does not exist in the DOM at all, collapsing the space that the element otherwise would have taken up. On the other hand, using visibility: hidden;
will hide the element from view but otherwise keep everything else the same.
Display: Inline
Now if you recall from our HTML lesson, span
tags are, by default, rendered inline. This means that applying a display
value of inline
will essentially do nothing, however if you were to apply it on a div
tag, it will be rendered inline.
<!DOCTYPE html>
<html>
<head>
<title>Display: Inline</title>
<style>
div {
background-color: blue;
}
span {
background-color: lightblue;
padding: 0 0.5rem;
}
</style>
</head>
<body>
<div>
<span>How</span>
<span>cool</span>
<span>is</span>
<span>Sabe?</span>
</div>
</body>
</html>

Display: Block
Setting an element's display
value to block
will make it render as a block and inherit all of the characteristics that comes with being a block.
This is where things get interesting. While normally rendered inline, watch what happens when we set the span
tags to render as a block
like div
tags usually do:
<!DOCTYPE html>
<html>
<head>
<title>Display: Block</title>
<style>
div {
background-color: blue;
}
span {
background-color: lightblue;
padding: 0 0.5rem;
display: block;
}
</style>
</head>
<body>
<div>
<span>How</span>
<span>cool</span>
<span>is</span>
<span>Sabe?</span>
</div>
</body>
</html>

Noticed the difference this time?
Because our span
tags are now rendered as a block
, they individually take up 100% of the width of their parents, and thus you now see light blue covering where there used to be dark blue.
The div
is still there, you just don't see it because each of its children are now taking up all the space inside of it, along with their lighter background color.
Display: Inline Block
Inline blocks is essentially taking a block and making it render inline. By setting the display
property to inline-block
, the element shares characteristics from both values.
You can, for example, manipulate the block's height, while remaining inline:
<!DOCTYPE html>
<html>
<head>
<title>Display: Inline Block</title>
<style>
div {
background-color: blue;
}
span {
background-color: lightblue;
padding: 0 0.5rem;
display: inline-block;
}
span:nth-child(1) {
height: 1rem;
}
span:nth-child(2) {
height: 2rem;
}
span:nth-child(3) {
height: 3rem;
}
span:nth-child(4) {
height: 4rem;
}
</style>
</head>
<body>
<div>
<span>How</span>
<span>cool</span>
<span>is</span>
<span>Sabe?</span>
</div>
</body>
</html>

Each individual span
tag had its height adjusted like a block, but it remained rendered inline. The power of inline-block
!
In our next lesson, we will continue our newly-gained knowledge of how display
works by learning how flexbox works!