Why does inline-block cause this div to have height?

Question

jsFiddle Demo

I cannot seem to figure out why using display:inline-block would cause this

element to

相关标签:

Answer 1

Apparently what display:inline-block does for default is set a visual height based on his parent line-height. The solution make a parent wrapper with this properties:

#container {
  line-height:0;
}

The demo http://jsfiddle.net/FE3Gy/33/ . Here you can check an example with different font-size values.

Acorrding to the W3 is:

The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

About inline box here

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

So you can check more about line-height here :

http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 2

display:inline-block has different behavior than display:block. While block create a box element, inline block creates a box but it add some surrounding content as if it were a single inline element. This surrounding content could be the source of your issue. I think unless you have a very specific reason to use inline-block you should use display:block.

Answer 3

You'll get an actual line whether you have a hidden input or a space or whatever - your browser thinks it's some inline content, therefore it gets a line.

http://jsfiddle.net/FE3Gy/7/

<div style="display:inline-block;"> </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>

Even if you have absolutely nothing, you'll get a line. display: inline-block turns it into inline-content.

http://jsfiddle.net/FE3Gy/15/

Answer 4

Layne and Nate have the right answer, but I wanted to bring to your attention this clause from the CSS 2.1 spec, section 9.4.2.

Line boxes are created as needed to hold inline-level content within an inline formatting context. 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.

Spans (inline elements) that have no in-flow content (<input type="hidden" /> is display:none so cannot be treated as in-flow content) meet those criteria so their containing line-boxes are treated as 0 height or non-existing. inline-block elements are explicitly excluded from meeting those criteria so the inline-block element creates a line box that must be line-height tall.

Note that you can see this in action in another way by adding a border to a span element so that it doesn't comply with the above criteria. See http://jsfiddle.net/FE3Gy/36/

Answer 5

As cited above by @nkmol, its does carry default font size and line height causing unnecessary height for the parent. In some cases, line-height: 0 does solve the problem. But sometimes, in exceptional cases like an empty tag inside a parent

<div>
<a href=''></a>
</div>

I above case, just setting the font-size: 0 or line-height: 0 doesn't solve the problem as the a tag.

vertical-align: middle;

fixes the problem in such a case.

Answer 6

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.

---

Update

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.

Short version:

Just think of it as inline-block expects content and reserves a minimum line space based of the known line-height.

Some more insight:

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.