Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does inline-block work differently when overflow: hidden is applied?

Tags:

html

css

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

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 normally, but I don't know why. I think it has nothing to do with the overflow property. But my thought is clearly wrong. Why?

like image 504
김진우 Avatar asked Jan 11 '16 16:01

김진우


2 Answers

By default inline boxes in a line are vertically aligned by their baselines (since the default value of 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 an inline-block is visible, then the baseline of this inline-block is the baseline of its last line, but if the overflow property has another value (for example hidden), then its baseline is the bottom margin edge.

The documentation says

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

I also suggest you reading this great article in order to understand completely the vertical alignment of inline stuff.

like image 62
user3790069 Avatar answered Oct 01 '22 12:10

user3790069


Add vertical-align to your css and it should work:

#myDivTag, #map-canvas {
    display: inline-block;
    vertical-align:top;
    height: 95%;
    width: 49%;
    z-index: 0;
} 
like image 33
GaryS Avatar answered Oct 01 '22 10:10

GaryS