This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

Date prep: technical term

First, we need to master a few technical terms, which will help us get a deeper understanding of inline elements.

  • Anonymous text: Any string that is not contained within a line element. Such as:

helloworld

  • Em box: Also known as the character box. As shown in the figure below, we set the font size to actually provide the size of the em box. The actual size of the characters displayed is not necessarily this size.

​

  • Content area: In a non-replacement element, there may be two types of content area. It can be a box consisting of em boxes of characters in the element string together, or it can be a box described by the characters in the element. In a replacement element, the content area is the element’s proper height plus any internal and external margins or borders that may exist.
  • Line spacing: the difference between the values of line-height and font-size.
  • Inline: For non-replacement elements, this value is exactly line-height (without padding); For replacement elements, this value is the height of the content area.
  • Row box: The smallest box containing the highest and lowest points of the boxes that appear in a row. In other words, the top of the row box is the top boundary of the highest row box, and the bottom of the row box is the bottom boundary of the lowest row box.

Start date – non-replacement element + replacement element

Non-substitution element

Establish a box

First, font size determines the height of the content area for a non-replacement element within the line or for a portion of anonymous text.

​

Next we get the inline box based on the line-height.

  • When line-height
  • When line-height> text-size, the inside of the line is larger than the content area

The vertical alignment

If you change the vertical alignment of the inline boxes, you set the vertical-align property of an element, which causes its content area to rise or fall with the inline boxes, thereby affecting the height of the inline boxes.

Example:

​

Here are the results:

​

If you don’t know why tall is promoted to the same position as the top of Strong, you can look at the vertical property.

Baseline and row height

The exact height of a row of boxes depends on how its component elements are aligned with each other, which often depends heavily on where the baseline falls within each element (or part of the anonymous text). Because this position determines how the in-line boxes are placed.

Changing the line-height of an in-line element can cause lines of text to overlap. In all cases, the change is for a single element, but can affect the line-box height.

Zoom line height

The best way to set the line-height is to use a raw numeric value, because this value becomes the scaling factor, and the factor is an inherited value rather than a calculated value. The advantage of this is that the inherited value has the flexibility to adjust the row height when font size is set or not set for child elements.

Such as:​

If we do not want the children to inherit the parent’s line-height, we can override the inherited scaling factor by setting the line-height for the children.

Adding a box attribute

The border of a line element is controlled by a font-size, not a line-height. A margin pulls the border away from the text itself, but it does not change the shape of the content area. It only affects the height of the box, but does not change the line height.

​

As shown in the figure above, line-height does not change with the addition of margin, but inline height does.

Let’s look at one case at a time:

​

​

This is the case because the margins are too large and the row backgrounds overlap. If you don’t know why, see the definition of row height in the technical term.

Replace the element

In-line replacement elements (such as images) are generally considered to have inherent heights and widths. So the inline box of the replacement element is defined in terms of the entire element (including the content, margin, and margin).

The line-height of the replacement element has no effect on the image’s inline box, which is the same as its content area.

So what’s the use of line-height in a replacement element?

This is where vertical alignment comes in. In this property, the height of the image itself is not important, but the value of the line-height.

Adding a box attribute

Margins and borders affect the height of the line box because they are part of the line box of the line replacement element. So when we add a margin to it, the border will increase the inside of the line.

If there are any mistakes above, please correct them in the comment section, thanks ~

Reference book: Authoritative Guide to CSS

​