[Web front end] Inline-block element setting Overflow:hidden property causes elements in adjacent rows to be offset downward

CP from:50421025

In the form modification interface, you often use a label, a content, and a Modify button to form a single-line interface, as follows:

In the case where the total length of the form is limited, when the middle mailbox name is too long, the button next to it is obscured.

We can set the middle mailbox to the maximum width, and then for the length beyond the partial set Overflow:hidden to solve this problem.

However, this may lead to another classic baseline alignment problem, which is the main issue to be discussed in this article.

1. Problem phenomena

Let's first give an online example:

http://wow.techbrood.com/fiddle/15438

We can see that when the Overflow:hidden attribute is added to the middle Inline-block element P, its left and right neighboring elements are strangely pulled down by a certain distance.

2. Workaround

A common workaround is to add Vertical-align:bottom to the above inline-block element. You can test it online in the example above.

3. Cause of the problem

This behavior is clearly defined by the W3 specification:

Inch
inch if its ' overflow ' property had a computed value other than ' visible ',
inch  case The baseline is the bottom margin edge.  

We can know from the specification that when a inline-block element is set overflow a non-visible property value, its baseline is forced to be modified to the outer edge of the element.

We know by default, baseline is the bottom-line position of the character X and the Vertical-align property value is baseline.

Also, because the div contains only elements of the inline level in the block, an IFC (inline formatting context) is generated to specify the rendering rules for the elements therein.

Follow the IFC layout rules, align vertically to follow the Vertical-align property (see reading: HTTP://TECHBROOD.COM/GUIDE/H5B2A?P=CSS-IFC),

Then the 2 anonymous line box on either side of the P element will be forced to move down an offset value to align with the P element.

Then there may be a further questioning, why W3 to make such a strange rule?

This is because overflow is set to a non-visible value, which causes the rendering of the last line box in the Inline-block element to be in an indeterminate state (the browser may or may not render).

This allows the baseline of the default rule to be left in an indeterminate state, so that the baseline is defined as the next outer edge.

"Baseline"-   with
 with the parent ' s baseline.  

4. Calculation of offsets

The downward offset above is actually the distance from the default baseline of the Inline-block element and its lower outer edge.

Shift = D (descent) part of Glyph (letter descent) + Bottom half-leading

5. Reference Links:

1. Http://techbrood.com/Guide/h5b2a?p=css-line-height

2. Http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

3. http://www.w3.org/TR/CSS2/visudet.html#leading

[Web front end] Inline-block element setting Overflow:hidden property causes elements in adjacent rows to be offset downward