Difference between block, inline and inline-block display in CSS
📋 Table Of Content
If you have started your journey as a front-end developer then the concept of the display elements is very important to understand.
The display property in CSS specifies how an element is displayed on our web pages. It controls the layout of the whole HTML page.
Every HTML element is rendered in our web browser as a type of box. And every element has a default display property - block or inline.
So, here in this article, we will learn the difference and the use of three display property values :
- block
- inline, and
- inline-block
Even though there are lot more values of the display property, we will focus on these three as it is the most commonly used ones.
Block element
display:block;
It displays an element as a block element. It starts in a new line and covers the whole width from left to right.
In block elements, we can add margin, padding, height, and width.
Example of block elements
Some examples of elements with default block properties are : < div > , < p >, < h1 > (all header) and < li > tags.
HTML
<body>
<div class="block">
<div class="box-block">
div tag element | display: block
</div>
<p>
p tag element | display:block by default
</p>
</div>
</body>
CSS
.box-block {
display:block;
background-color: green;
padding: 10px;
}
p {
background-color: indianred;
padding: 10px;
}
Result:
Inline element
display: inline;
It displays the elements in the same line and does not start on a new line or take up the whole width.
You cannot set the height or width of an inline element as it won't have any effect on it. It takes up the width of the content inside the element.
However, you can set the padding as any block element , but when it comes to margin you can only add margin-right or margin-left , you cannot add margin to the top or bottom of the inline element.
Examples of inline elements
Here are some HTML elements with default inline display property: < span >, < a > and the < img > tags.
HTML
<div class="inline">
<div class="inline-element">display:inline</div>
<div class="inline-element">display:inline</div>
<div class="inline-element">display:inline</div>
<span>span</span>
</div>
CSS
.inline-element {
display: inline;
background-color: lightblue;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
}
span {
background-color: lightblue;
padding: 10px;
}
Result:
Inline-block element
display: inline-block;
The inline-block elements works the same as an inline element. They do not start on a new line and the width of the element is the same as the width of the content inside it.
But in inline-block element we can add height and width to the element. And also we can add padding and margin on all the four sides of the element.
The most common place where we use inline-block is in building the navigation menu on our website.
HTML
<div>
<div class="inline-block-element">display:inline-block</div>
<div class="inline-block-element">display:inline-block</div>
</div>
CSS
.inline-block-element {
display: inline-block;
background-color: yellowgreen;
padding: 10px;
width: 200px;
}
Result:
Summary of block vs inline vs inline-block
| display | description | set height & width | padding(all sides) | margin(all sides) |
|---|---|---|---|---|
| block | elements starts on new line and takes up whole width. | YES | YES | YES |
| inline | do not starts on new line and do not takes up whole width | NO | YES | ONLY margin-right and margin-left allowed |
| inline-block | same as inline element | YES | YES | YES |
DEMO:
