Logesh Paul Logesh Paul - 5 months ago 12
CSS Question

What is the difference between display: inline and display: inline-block?

What exactly is the difference between the

inline
and
inline-block
values of CSS
display
?

Answer

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

display: inline-block

display: inline-block

display: block

enter image description here

Code: http://jsfiddle.net/Mta2b/

Elements with display:inline-block elements are like display:inline elements, but they can have a width and height. So you can use an inline-block element as a block while flowing it within text or other elements.