Question

I was asked a question, whats the difference between the following and I did not really know the answer. So here it goes, what is the difference between,

display:inline-block 
display:inline
display:block

thanks for your answers…

Answer 1

The main one you are struggling with is inline-block from your comment under your question.

inline-block is a way to get block elements to appear inline, so instead of floating a load of divs left, you could use inline-block on them, preserving their behaviour as divs but making them inline elements instead.

For example lets say you have

​<div style="display:block" >Test</div>
<div style="display:block" >Home</div>​

This will render as

Test

Home

Where as

​<div style="display:inline-block" >Test</div>
<div style="display:inline-block" >Home</div>​

will display as

TestHome

In addition, inline elements can’t have width/height attributes. Block elements can. inline-block makes a block element look like an inline element but you can still apply styles that only block elements can have. See this demo.