Notes organized from the classroom online teacher Liu Qiang’s video teaching course is very clear, concise courseware and attachments can be downloaded freely excellent! Web Front-end Siege Lion (Spring 2021)

line box

Font Metrics

Four lines The interval between mean line and base line is x-height x height of lowercase letters

  • Ascender Line Upper edge line
  • Mean the middle route of the line
  • Most letters are aligned with the base line.
  • Descender line

Alignment of line box height with text in line box

  • The height of the line box is controlled by text and line height
  • The distance from ascender line to the top is the same as the descender line to the bottom, meaning the actual text occupies the middle of the row box
  • The line height contains only text
    • Setting the vertical padding or border does not affect the height of the box
    • Its height only depends on the row height

Box placement in line box

Line boxes insideVertical alignment of boxesBy vertical-align

Vertical – align:

  • baseline default

Different box baseline

  1. Text: text own baseline
  2. Image: The lower edge of the image
  3. Inline-block: baseline of the last line of text

vertical-align

It can be seen that the line height below is 3 (3em: font size *3). The distance between the top edge and the top edge is 1em and the distance between the bottom edge and the bottom edge is 1em. No, the text is more than 1em high, so the distance between the top edge and the top edge and the bottom edge is less than 1em

  • vertical-align: baseline
  • vertical-align: middle
vertical-align: baserline; /*default*/
vertical-align: middle; /* the line in the middle of the image is aligned with the text meanline */
vertical-align: top; /* The top edge of the image and the top edge of the entire row box is shown in figure 2*/
vertical-align: bottom; 
vertical-align: text-top; /* The upper edge of the image and the ascenderline alignment of the text are shown in Figure 3*/
vertical-align: text-bottom; 
vertical-align: 6px; /* The baseline is offset by 6px if it is negative */
Copy the code

Figure 1

Figure 2

Figure 3