-1

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...

Shouvik
  • 11,350
  • 16
  • 58
  • 89
  • w3schools has the answer: [CSS display Property](http://www.w3schools.com/cssref/pr_class_display.asp) – Joshua Lückers Jul 28 '12 at 20:09
  • -1 because you obviously haven't bothered looking it up. You could find the answer many many many times over on google. – Jon Taylor Jul 28 '12 at 20:11
  • NO, block and inline-block seem to exhibit the same behaviour. I have actually used them interchangeably. Also I believe SO is trying to build its own db of questions. I did check here and did not find an answer to this... – Shouvik Jul 28 '12 at 20:12

1 Answers1

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.

Community
  • 1
  • 1
Jon Taylor
  • 7,865
  • 5
  • 30
  • 55
  • This is the same as when I use inline on them instead of inline block – Shouvik Jul 28 '12 at 20:20
  • yes but using inline on them now makes it an inline element, this no longer acts as a block element, whereas inline-block makes it act like a block but appear inline. – Jon Taylor Jul 28 '12 at 20:21
  • So, a block element has spaces on the top and the bottom, unlike the inline element. http://jsfiddle.net/QJpX8/ – Shouvik Jul 28 '12 at 20:22
  • Is there some property of the block element that I am missing which inline block brings in? – Shouvik Jul 28 '12 at 20:23
  • block elements are not inline elements, thereofre to make block elements appear inline but remain as block elements you have to use inline-block. I suggest you read up on the differences between inline and block. Block elements by default take up the entire width with a new line before and after, inline elements are, well, inline. – Jon Taylor Jul 28 '12 at 20:24
  • 1
    @Shouvik, see this: http://jsfiddle.net/QJpX8/1/ 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. – sachleen Jul 28 '12 at 20:26
  • @sachleen: that I can see and makes a lot of sense, please post as answer and I will select it... – Shouvik Jul 28 '12 at 20:29
  • @Shouvik Jon's answer is pretty good. I've just added mine on to his. – sachleen Jul 28 '12 at 20:35
  • accepted :). Thanks for clearing that up! – Shouvik Jul 28 '12 at 20:36
  • @sachleen thanks, I didn't mention specifically what block can do over inline just because this is something which can be looked up very easily. Never the less, its still a good addition to the asnwer so I will add your comment into my answer. – Jon Taylor Jul 28 '12 at 20:36
  • lol I see you edited it too haha :) – Jon Taylor Jul 28 '12 at 20:37