Vertical-align attribute is a common attribute of CSS. When I first met him, he introduced himself to me like this

vertical-align: baseline; The element is placed at the baseline of the parent element

This sentence has been misleading me for a long time. Subconsciously, I thought that the parent element he said was the element whose child element uses the vertical-align attribute. Every time there was a bug in the vertical-align attribute, I still thought, where is the baseline of the parent element? How are the baselines of inlin, block, and inline-block elements determined? Why is this alignment different than I expected?

Alas… It’s a long story…

Until later, AFTER reading the tutorial and blog of Zhang Xinxu and other big god for in-depth understanding of vertical-align, I found that I was totally wrong, vertical-align: baseline; What it really does is

vertical-align: baseline; The baseline of the element that sets this property is aligned with the baseline of the element’s line box.

I diao ~

CSS is really extensive and profound

Scared me to sort out the relevant knowledge, so as not to make confused later

Baseline middle line bottom line and top line

Line box box model



Content Area Content Area

The area covered by the bottom and top lines, and the line elements can be displayed by setting background-color

It can be approximately understood as the size of the background area when the text is selected in the figure above
Content area size
It’s all about text size and fontIn Simsun fonts, its height is approximately the font size.



If your line height is fixed, it will inflate the height of the inline box after the font increases causing the Content Area height to exceed the line height


Inline boxes inline boxes

When there are no other factors, the inline box height is equal to the Content Area height (line-height is set to zero because the default value normal sets the appropriate row height), and the row height can be increased or decreased by setting the row height.

That is, divide the line spacing value (line height – font size) by 2 and increment it to the upper and lower sides of the Content Area. We often take advantage of this principle by setting the line height to be the same as the container height so that a single line of text is vertically centered, when the content Area is really centered

After setting the row height, the row height ===inline box height??

No, if your font size is large enough to cause the Content Area to exceed the line height limit, or if you insert an image that is taller than the line height, the inline boxes will be stretched out, but the line height will not be affected

Inline horizontal label elements and text written directly into the parent label form inline boxes

The height of the line box affects the height of the line boxes described below

Line boxes

A line box is a virtual rectangle enclosing a row of content, consisting of inline boxes

The height is equal to the maximum height of all inline boxes on the line

The content height of a block-level element is stacked one by one, or the content height of a block-level element is the height of the line boxes for a single row of content

vertical-align

vertical-align: baseline

Default property, which aligns the baseline of the element on which it is set with the baseline of the element’s line boxes.

So how do you determine the baseline position

For inline boxes inline boxes

The baseline of an inline-block element is the baseline of the last line box in a normal stream, unless there is none in that element

The line boxes or their ‘overflow’ property is not ‘visible’, in which case the baseline is the bottom edge of the margin

For example, the image baseline introduced by the IMG image tag is at the bottom of the image, as is the textarea tag, and the horizontal element inline-block with no elements is at the bottom

The baseline of an inline horizontal element is the baseline of its internal text

How do you determine the baseline location of line boxes?

In fact, just imagine that there is an invisible X inside, and the base line is the base line of the invisible letter X, and the position of the base line will not change

Here we write an X inside the div element that mimics the invisible letter x mentioned above. The effect is the same

<div style="">
    x
    <span style="">xspan1</span>
    <input style="">
</div>Copy the code



When you set the span vertical-align to bottom you will see that the center line of the input box is aligned with the bottom of the x in the div, and the bottom of the X in the SPAN will be offset.



Position: Absolute and float remove the element directly from the flow of the document as if it were not contained in line boxes. Vertical-align does not work and cannot be used to determine the baseline position

vertical-align: middle

The vertical line in the element is aligned with half the height of the parent element’s baseline plus lower case X

Often used for vertical center alignment of inline-block elements

However, due to the different fonts, the 1/2x position is also different, and the song style is somewhat sunken



And as the font size increases, this bug will become more and more obvious. You can solve this bug by wrapping the text with a label and setting the font size separately and then setting the font size of the parent element to zero

The position of the base line does not change. Setting vertical-align changes the alignment of the element itself and changes its position

Sometimes you’ll find that when you set vertical-align for an element, it doesn’t move and the position of the neighboring element changes

It’s not

The following

<div style="line-height: 100px; background: #f1faf1;">
    <div style="display: inline-block; height: 40px; vertical-align: middle; width: 100px; background: bisque;">
    </div>
    <span style="vertical-align: middle;">xxxx</span>
</div>Copy the code



Set the height of the parent element to 100px, and set the alignment of the inline-block elements div and span to vertical-align: middle. The two elements move up and down by themselves

<div style="line-height: 100px; background: #f1faf1;">
    <div style="display: inline-block; height: 40px; width: 100px; background: bisque;">
    </div>
    <span style="vertical-align: middle; line-height: 140px;">xxxx</span>
</div>Copy the code

We set the line height of the span to 140px and set its alignment



The span itself did not move, and the div next to it moved

In fact, it’s not the div that has moved, it’s the span that has moved, but the height of the line boxes is determined by the span, so it looks like the div has moved.