Menu
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?
896
Inline element properties:The height of an inline element is the height of the content. The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS.
If you have a border or padding set for your divs, then you've created additional pixels that will prevent your divs from adding up to a 100% width. To fix this, make sure you've added box-sizing: border-box to the div's styles.
You can use 2 properties, clientHeight and offsetHeight to get the height of the div. clientHeight includes padding of the div. offsetHeight includes padding, scrollBar, and borders of the div.
You can't set the width or height. inline-block It's formatted just like the inline element, where it doesn't start on a new line. BUT, you can set width and height values. block The element will start on a new line and occupy the full width available.
One thing that happens when you create a display:inline-block is that the line-height calculations will change:
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.
source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
source: http://www.w3.org/TR/CSS2/visudet.html#line-height
CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom.
source: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
So the line height will be defined on their font type. However when the inline-block is empty it will have its basic line-height. It however still tries to generate his line-height with a font.
To quick fix this you can use a wrapper which defines exclusive that there is no font, so no line-height which leads into no height:
.wrapper { font-size: 0; } Where you can reset this property in your inline-block:
.wrapper div { font-size: medium; } Where the default value of font-size is medium.
jsFiddle
This way you can still use content in the inline-block without there being a gap.
This update is because of Kevin Wheelers comment
... I'm confused, it still never says what the height of an empty inline-block element is. ...
I want to note that I have not found any official documentation about this, though through testing I have found common patterns.
Just think of it as inline-block expects content and reserves a minimum line space based of the known line-height.
JsFiddle as a more clear example
As you can see the gab of the inline-block height is based on a line-height, which we have determed in the first post.
Now where does this line-height come from?
It is inherited from the first that determs the line-height: the <body> element.
You can test this my changing font-size, font-family or the line-height of the <body> element.
So it reserves a line-box for it's content. Which is strange that it is visible at all, as you can see according to the W3 specs of inline-formatting:
Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
It does this for every other element inside of the inline-block, but it always seems to reserve a minimum line space.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
