Each encounter multiple Inline-block element arrangement of the strange vertical position of the problem can be through experience, set vertical-align to solve, not in-depth study, now need to analyze and summarize the problem.
Problem leads
There is a new page of small meat, where a section of code is this:
<!DOCTYPE HTML><HTML> <MetaCharSet= "Utf-8"></Meta> <Head> <title>Vertical-align</title> <styletype= "Text/css">Body{background:#eee;font-size:16px; }#linkBox{background:Pink; }#linkBox. Linkurl{Display:Inline-block;background:#fff;padding:6px 16px;Overflow:Hidden; }#linkBox. Button{Border:None;Display:Inline-block;background:Orange;Line-height:24px;padding:6px 8px; } </style> </Head> <Body> <DivID= "Linkbox"> <spanclass= "Linkurl">Https://www.taobao.com</span> <Buttonclass= "button">Click Copy</Button> </Div> </Body></HTML>
He was puzzled as to why the horizontal position of the two inline-block was so.
1. First, remove the effect of Overflow:hidden, after removing it:
<HTML> <MetaCharSet= "Utf-8"></Meta> <Head> <title>Vertical-align</title> <styletype= "Text/css">Body{background:#eee;font-size:16px; }#linkBox{background:Pink; }#linkBox. Linkurl{Display:Inline-block;background:#fff;padding:6px 16px; }#linkBox. Button{Border:None;Display:Inline-block;background:Orange;Line-height:24px;padding:6px 8px; } </style> </Head> <Body> <DivID= "Linkbox"> <spanclass= "Linkurl">Https://www.taobao.com</span> <Buttonclass= "button">Click Copy</Button> </Div> </Body></HTML>
The styles are as follows:
As you can see, the height of the preceding span element is raised by the Overflow:hidden, and this problem is first shelved, so let's see why the button and span are perpendicular:
For Display:inline-block blocks, when Vertical-align is not set, its default value is baseline, and the explanation for baseline is:
The concept of baseline is the lower edge of the letter x, here you can analyze the following example, the preceding span is not set line-height, in the debugging tool can see its row height is the default 18px, and the Back button line-height is set to 24px The default way of Vertical-align is baseline, which is displayed as a style.
Want to be all vertically bottom, add vertical-align:bottom;
This is done after adding:
2. Let's look at the problem of Overflow:hidden elevation:
The baseline of ' Inline-block ' is the baseline of its last line box in normal flow, unless it does not in-flow line boxes, or its ' overflow ' attribute is not equal to ' Visible ', in which case the baseline is located on the margin of bottom margin.
The explanation for this paragraph is that:
i) if Inline-block's overflow is set to visible (the default property), its baseline is the baseline of the containing block of the current row.
II) If the overflow is set to another, its bottom margin is located on the baseline of the forward containing block;
In our case, the Inline-block element is Overlow:hidden, so the bottom border of the element is baseline in the parent element.
So the height will appear to increase.
Official description of the baseline:
Baseline
Align The baseline of the box with the baseline of the parent box. If The box does not has a baseline, align the bottom margin edge with the parent ' s baseline.
Yes, that's it.
Reference:
1.http://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container
2.https://www.w3.org/tr/css2/visudet.html#propdef-vertical-align
Talk about Vertical-align and line-height again
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
