Vertical-align, webvertical-align

Vertical-align, webvertical-align

Many programmers knowVertical-AlignWhat does it mean, but vertical-align knows exactly what the alignment standard is. Today we will talk about web Front-endVErtical-align.

1,Function
Veritical means vertical, while align means align. The two are combined to align in the vertical direction.
2,Object
Veritical-align object, which is the vertical align object.
Inline element, inline-block element, and common text box.

What is inebox? 1, Location

Linebox mainly exists in block elements and inline-block elements. Linebox can contain common text boxes, inline-block elements, and inline elements.


 

2, Width and height

The linebox width depends on the width of the internal element. The maximum value is the width of the parent element.
If line-height is not set, the height of linebox is determined by the linebox element. Generally, the height of linebox is determined by the highest element.

Default vertical attribute baseline 1, What is baseline?

In short, baseline is a line under the lowercase letter x.

  2, Baseline of the element in linebox 2.1, Baseline of a common text box

 

The baseline of the common text box is the baseline of the text. The baseline position depends on font-size and line-height.
 

2.2, Baseline of the inline Element

Baseline of the inline element, which is the baseline of the text box in the content box content-box.
What if there are two lines of text boxes in content-box?
This is not the case. The inline element has only one line in the text box.
 

2.3, Baseline of the inline-block Element

The three images from left to right are all inline-block elements. The difference is that the left side contains the content c, in addition to the normal stream content, overflow: hidden is added in the middle. There is no content on the right but the content area has a height. The red line represents the boundary of the margin-box. Yellow indicates border, Green indicates padding, blue indicates content, and blue indicates baseline. The outer edge of the inline-block element is the edge of the margin-box.

The position of the baseline of the inline-block element depends on whether the element is in the normal stream.

(1) In the case of normal stream content, the baseline of the inline-block element is the last baseline as the element of the content, the baseline of this element must be determined by itself.

(2) When the overflow attribute is not visible, baseline is the lower boundary of margin-box.

(3) baseline is the lower boundary of margin-box even if there is no content but the content area is still high.
 
3,Add another scenario
Its baseline is also a margin-box element, which is an inline replacement element, such as an img label. no matter whether the display of the img label is set to inline or inline-block, its baseline is margin-box, you can try it.
 
ForVertical-alignIs there any further understanding? Try it now !!!