CSS Display Property – inline, block, inline-block

CSS

0 Comments

There are different ways to display elements in CSS (inline, block, inline-block, and none). The display property is used to manage this, but it's probably easiest to explain with an example.

Example

HTML

<div class="inline">inline</div>
<div class="inline">inline</div>
<div class="block">block</div>
<div class="block">block</div>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
<div class="none">I'm hidden</div>
<div class="block">block</div>

CSS

.inline,
.block,
.inline-block {
    padding: 10px;
    border: 2px solid green;
}

.inline {
    display: inline;
}

.block {
    display: block;
    border-color: darkred;
}

.inline-block {
    display: inline-block;
    border-color: darkblue;
}

.none {
    display: none;
}

Result

display: inline
As you can see from the result, inline elements only take up as much space as they need. They also will sit next to each other horizontally if there is enough room.
display: block
Block elements want to be on their own line and fill up the entire width of the screen by default. They also completely ignore the top and bottom padding, margin, and border of inline elements. Block elements can also be sized with the width and height properties (inline elements can't be sized).
display: inline-block
inline-block behaves the same as block unless stated otherwise. The main difference is that inline-block only takes up as much space as needed and can also be placed side-by-side like inline elements. However, it doesn't have the downsides of inline. Block elements do respect inline-block's top and bottom padding, margin, and borders. It can also be sized just like block elements.
display: none
Hides the element on the page.

These aren't all the values display can be set to, but they are the most common and important.

Practice in Editor

Leave a Comment