Inline-block element overflow: The hidden attribute causes the element in the adjacent row to be offset downward.

Inline-block element overflow: The hidden attribute causes the element in the adjacent row to be offset downward.

In the form modification interface, a label, a content, and a modification button are often used to form a single-line interface, as shown below:

When the total length of the form is limited, the buttons next to the form are overwritten when the mailbox name in the middle is too long.

We can set the maximum width of the intermediate mailbox, and set overflow: hidden for the excess length to solve this problem.

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

1. symptom

Let's first provide an online instance:

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

We can see that when the overflow: hidden attribute is added to the inline-block element p in the middle, the adjacent elements on the left and right are strangely pulled down to a certain distance.

2. Solution

A common solution is to add vertical-align: bottom to the preceding inline-block element. You can test it online in the preceding example.

3. Cause

The W3 specification clearly defines this behavior:

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.

We can see from the specification that when an inline-block element is set with an overflow non-visible attribute value, its baseline will be forcibly modified to the bottom outer edge of the element.

By default, the baseline is the bottom line of the character x and the vertical-align attribute value is baseline.

In addition, because div contains only the row-level elements in the block, an IFC (in-row formatting context) is generated to specify the rendering rules of the elements.

Vertical Alignment follows the vertical-align attribute according to IFC layout rules (see: http://techbrood.com/Guide/h5b2a? P = css-ifc ),

The two anonymous line boxes on both sides of the p element will be forced to move an offset value downward to align with the p element.

So some people may have to ask further, why is W3 so strange?

This is because overflow is set to a non-visible value, which makes the rendering of the last line box in the inline-block element uncertain (the browser may render or not render ),

This keeps the baseline of the default rule in an uncertain state. Therefore, the underlying edge of the rule must be used as the baseline.

baselineAlign the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

4. offset Calculation

The following offset is actually the default baseline distance between the inline-block Element and Its 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

By iefreer