Set display:inline to a div results in zero width and height

Question

So I am having a very simple markup like this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="foo">
  <div>a</div>
</div>
</body>
</html>

and CSS:

.foo {
  background-color: #eee;
  height: 80px;
  line-height: 80px;
  display: inline;
  vertical-align: middle;
}

But this makes div.foo to have 0 width and 0 height. If I set display to inline-block, it works. Why?
Here is the JSBin of this post.

the `width` and `height` is applied only to `block` or `inline-block` element, inline element will have size depending on only `margin` and the content. that's by design, so there is no answer for why. Of course that's the most difference between inline and block. — King King, Apr 07 '14 at 22:55
@KingKing - the height of inline elements is also affected by line-height. — Bryan Downing, Apr 07 '14 at 22:56
@BryanDowning Thx man! But it is so wired that it does not just ignore it. — John Wu, Apr 07 '14 at 23:00
the size of inline element also depends on the `letter-spacing` and `word-spacing` — King King, Apr 07 '14 at 23:01

score 0 · Accepted Answer · answered Apr 07 '14 at 22:56

0

Because a <div> is a block element you must specify it's width and height or it wil be wrapped arround the content inside the <div> element.

And indeed changing it's display to display:inline; or display:inline-block; changes his normal behaviour.

answered Apr 07 '14 at 22:56

brobken

1 Answers1