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 :
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.
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.
Some examples of elements with default block property 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:
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.
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:
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:
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: