The display
CSS property is fundamental for controlling the layout and flow of an HTML document. Most elements have a default display
value of either block
or inline
(though some elements have other default values).
An inline
element occupies only as much width as necessary. It stacks horizontally with other elements of the same type and may not contain other non-inline elements.
<span>This is some <b>bolded</b> text!</span>
As demonstrated above, two inline
elements, <span>
and <b>
, are in-line (hence the name) and do not break the flow of the text.
A block
element occupies the maximum available width of its’ parent element. It starts with a new line and, in contrast to inline
elements, it does not restrict the type of elements it may contain.
<div>Hello world!</div><div>This is an example!</div>
The div
element is block-level by default, and as shown above, the two block
elements are vertically stacked and, unlike the inline
elements, the flow of the text breaks.
The inline-block
value gives us the best of both worlds: it blends the element in with the flow of the text while allowing us to use padding
, margin
, height
and similar properties which have no visible effect on inline
elements.
Elements with this display value act as if they were regular text and as a result are affected by rules controlling the flow of text such as text-align
. By default they are also shrunk to the the smallest size possible to accommodate their content.
<!--Inline: unordered list-->
<style>
li {
display : inline;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
<!--block: unordered list-->
<style>
li {
display : block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>