What is the difference between display: inline and display: inline-block?
A visual answer
Imagine a <span>
element inside a <div>
. If you give the <span>
element a height of 100px and a red border for example, it will look like this with
display: inline
display: inline-block
display: block
Code: http://jsfiddle.net/Mta2b/
Elements with display:inline-block
are like display:inline
elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
Difference of supported styles as summary:
-
inline: only
margin-left
,margin-right
,padding-left
,padding-right
-
inline-block:
margin
,padding
,height
,width
display: inline;
is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:
<p>
Pellentesque habitant morbi <em>tristique</em> senectus
et netus et malesuada fames ac turpis egestas.
</p>
The <em>
element has a display: inline;
by default, because this tag is always used in a sentence.
The <p>
element has a display: block;
by default, because it's neither a sentence nor in a sentence, it's a block of sentences.
An element with display: inline;
cannot have a height
or a width
or a vertical margin
. An element with display: block;
can have a width
, height
and margin
.
If you want to add a height
to the <em>
element, you need to set this element to display: inline-block;
. Now you can add a height
to the element and every other block style (the block
part of inline-block
), but it is placed in a sentence (the inline
part of inline-block
).