display
This property is used to change the way the content gets displayed.
Applicable Values:
none–hides the element and all its descendant.
block – applies line break before and after the element.creates
The element occupies 100% width of the parent container (if width not specified)
inline – removes the line break (if present) before and after the element.
display : inline
HTML snippet:
<div>
<p>Normal paragraph</p>
<p class="inline">Inline paragraph</p>
<p class="inline">Another Inline paragraph</p>
<p>Normal paragraph</p>
</div>CSS snippet:
p{
background-color : #e1e1e1;
padding : 5px;
margin-top : 15px;
margin-bottom : 15px;
}
.inline{
display : inline;
}Output Explanation:
By default, each normal paragraph creates a line break before and after the element.
After the first “Normal paragraph”, a line break is applied. So the second Inline paragraph is displayed in a new line.
However, there is no line break applied before and after the second and third paragraph due to “display:inline” style. So both the paragraphs are displayed in the same line.
As the fourth “Normal Paragraph” creates a line break before the element, it is displayed in a new line.
display : block
Each block element occupies the entire line and full width of its parent container.
HTML snippet:
<div>
<span id="nor-span-1"> Normal span element</span>
<span id="block-span-1" class="block">Block span 1</span>
<span id="block-span-2" class="block">Block span 2</span>
<p id="inline-para" class="inline">Inline paragraph</p>
</div>CSS snippet:
p,span{
background-color : #e1e1e1;
padding : 5px;
margin-top : 15px;
margin-bottom : 15px;
}
.inline{
display : inline;
}
.block{
display : block;
}Output Explanation:
All the block elements are created in a new line and occupy the full width of its parent.
display :inline-block
The element will be displayed as an inline element.
But its content will be displayed as a block element.
HTML snippet:
<div>
<span class="inline">Inline element. Despite the width specified as 80px,the inline element uses its parent width to accommodate its content.</span>
<span class="inline-block">Inline-Block element displaysits content as a block, but the element is displayed inline.</span>
<span>Another sample inline</span>
</div>CSS snippet:
p,span{
background-color : #e1e1e1;
padding : 5px;
width : 80px;
}
.inline{
display : inline;
}
.inline-block{
display : inline-block;
}
.block{
display : block;
}Output Explanation:
Inline-block element doesn’t apply line break before and after line element.
Its content is displayed like a block element.
