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:
margin-left
, margin-right
, padding-left
, padding-right
margin
, padding
, height
, width
splattne's answer probably covered most of everything so I won't repeat the same thing, but: inline
and inline-block
behave differently with the direction
CSS property.
Within the next snippet you see one two
(in order) is rendered, like it does in LTR layouts. I suspect the browser here auto-detected the English part as LTR text and rendered it from left to right.
body {_x000D_
text-align: right;_x000D_
direction: rtl;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
display: block; /* just being explicit */_x000D_
}_x000D_
_x000D_
span {_x000D_
display: inline;_x000D_
}
_x000D_
<h2>_x000D_
??? ????? ????_x000D_
<span>one</span>_x000D_
<span>two</span>_x000D_
</h2>
_x000D_
However, if I go ahead and set display
to inline-block
, the browser appears to respect the direction
property and render the elements from right to left in order, so that two one
is rendered.
body {_x000D_
text-align: right;_x000D_
direction: rtl;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
display: block; /* just being explicit */_x000D_
}_x000D_
_x000D_
span {_x000D_
display: inline-block;_x000D_
}
_x000D_
<h2>_x000D_
??? ????? ????_x000D_
<span>one</span>_x000D_
<span>two</span>_x000D_
</h2>
_x000D_
I don't know if there are any other quirks to this, I only found about this empirically on Chrome.
Block - Element take complete width.All properties height , width, margin , padding work
Inline - element take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.
Inline block - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.
One thing not mentioned in answers is inline element can break among lines while inline-block can't (and obviously block)! So inline elements can be useful to style sentences of text and blocks inside them, but as they can't be padded you can use line-height instead.
<div style="width: 350px">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua._x000D_
<div style="display: inline; background: #F00; color: #FFF">_x000D_
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat._x000D_
</div>_x000D_
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>_x000D_
<hr/>_x000D_
<div style="width: 350px">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua._x000D_
<div style="display: inline-block; background: #F00; color: #FFF">_x000D_
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat._x000D_
</div>_x000D_
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>
_x000D_
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
).
All answers above contribute important info on the original question. However, there is a generalization that seems wrong.
It is possible to set width and height to at least one inline element (that I can think of) – the <img>
element.
Both accepted answers here and on this duplicate state that this is not possible but this doesn’t seem like a valid general rule.
Example:
img {_x000D_
width: 200px;_x000D_
height: 200px;_x000D_
border: 1px solid red;_x000D_
}
_x000D_
<img src="#" />
_x000D_
The img
has display: inline
, but its width
and height
were successfully set.
Source: Stackoverflow.com