Best IT Recipes

Why is overflow: covertly adding extra height to an element of an inline block?

In this example ...

HTML

<body> <div> <div>foo bar</div> </div> </body>

CSS

 body, html, div { height: 100%; margin: 0; } div div { display: inline-block; overflow: hidden; }

Why overflow: hidden cause a vertical scrollbar? Also, why is this height not related to anything on the page? This is like an invisible stock.

100% height of all elements is intentional. Theoretically, this should cause the inner div to expand to fit the viewport. And this is so! ... while overflow: hidden does not exist, why?

+16
css
Sep 12 '14 at 23:14
source share
3 answers

The extra height is the height of the difference between vertical-align: baseline and vertical-align: bottom . "Line of descent." Where the seemingly random "5 extra pixels" come from. If the font size is 10 times larger, this gap will also be 10 times larger.

Furthermore, it seems that when overflow: hidden does not exist, the inline-block element has a baseline as the same baseline of its last line of text.

This makes me think that overflow: hidden causes the baseline of the entire inline-block element to be at the bottom of the element. Although there is no text there, the inline-block parent element reserves space for the descender line. In the example given in the question, it is not easy to see, since the parent inline-block element has height: 100% . So instead, the extra space reserved for the descender line overflows from this parent div.

Why is this space still there, although there is no text? I think that since inline-block creates the formatting context that calls this space. If this element were block , it would create this formatting context only after it encounters an inline element or text.

This is just a theory, but it seems to explain it. This also explains why @Jonny Synthetic answer works: adding overflow: hidden to the parent hides an extra descender line.

Thanks to @Hashem Qolami for the jsbins who gave me this theory.

+10
Sep 13
source share

Adding overflow: hidden to the parent div was not an option for me, nor was it working due to my HTML structure.

However, I noticed thanks to @Tony Gustafsson in OP that this fixes the problem:

 div div { vertical-align: bottom; }
+2
Apr 6 '17 at 21:35
source share

Elements with a height of 100% must have overflow: hidden . The first css rule only targets the outer div, hidden overflow applies to the inner div.

Jsfiddle with this CSS and it worked perfectly:

 body, html, div { height: 100%; margin: 0px; padding:0px; overflow: hidden; } div div { display: inline-block; overflow: hidden; }
+1
Sep 12 '14 at 23:23
source share


More articles:


All Articles