Why does inline-block cause this div to have height?
css, html
Solution
Ok as already mentioned very briefly in the comments:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
Source: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes
Problem
`jsFiddle Demo` I cannot seem to figure out why using `display:inline-block` would cause this `<div>` element to somehow gain height when its containing element was hidden. This does not happen with `display:block`. html: ``` <div style="display:inline-block;"><input type="hidden" /></div> <div>Gap above created by inline-block</div> <div style="display:block;"><input type="hidden" /></div> <div>No gap above if using block</div> ``` Why does `display:inline-block` cause the gap depicted here?