All geek questions in one place

Why does the built-in block work differently when overflowing: hidden?

I wanted to display two <div> elements that have width and height side by side. I applied inline-block to <div> s, but the position of the left element is weird:

vertical misalignment

HTML:

 <body> <div id="myDivTag">content</div> <div id="map-canvas">for google map API</div> </body>

CSS

 #myDivTag, #map-canvas { display: inline-block; height: 95%; width: 49%; z-index: 0; }

The only difference between the two elements is the overflow: hidden option. When I apply overflow: hidden to #myDivTag , it works fine, but I don't know why. I think this has nothing to do with the overflow property. But my thought is clearly wrong. Why?

+5
source share
2 answers

By default, inline fields in a row are vertically aligned along their baselines (since the default value for the vertical-align property is baseline ), and the baseline of inline blocks depends on the value of the overflow property. If the value of the overflow property on the inline block is visible , then the baseline of this inline block is the base line of its last row, but if the overflow property has a different value (for example, hidden ), then its base level is the bottom edge.

The documentation states

The base level of the “inline block” is the base value of its last string field in the normal stream if it has no lines in the stream or if its “overflow” property has a calculated value other than “visible”, in which case the baseline is edge of the bottom edge.

I also suggest that you read this wonderful article to fully understand the vertical alignment of the embedded material.

+7
source

Add the vertical alignment to your css and it should work:

 #myDivTag, #map-canvas { display: inline-block; vertical-align:top; height: 95%; width: 49%; z-index: 0; }
+2
source

Source: https://habr.com/ru/post/1240365/

More articles:


All Articles