Why does making a div display:inline make it suddenly go smaller?

Pretty simple question really when I make a div inline it seems to lose its height?

Any ideas? 开发者_高级运维I'm scratching my head....

UPDATE: after fiddling around I found another display type called "inline-block" which seems to allow me to keep items inline (unordered lists for example) and then set a height for them.

Is this a solution to the problem of inline elements losing the height setting?

Inline elements don't have heights... You've reached the very essence of difference between inline and block.

The height of an inline element is dictated by the line-height of the parent element, with whose contents they're now in-line. Therefore they're unable to have an explicit height of their own.

Similarly for the width, except that's dictated by the width of the contents.

I have found that if I use an inline-block I can make elements sit inline but not lose the height.