Link between line-height and the bottom of the image,

Link between line-height and the bottom of the image,
This is my understanding and arrangement after learning. If you have any errors or questions, please correct them and I will keep updating them!

Reading Zhang xinxu's visual screen may be more understandable. Click here;

 

Line-height, the distance between the baselines of the two lines of text;

Baseline: includes the top line, middle line, baseline, and bottom line in the English book;

Box Model:

• Content area (content area), a box that cannot be seen around the text, which is equivalent to the area when you select I, only related to font-size, font-family;
• Inline boxes does not display the content in blocks, but is arranged in a line. If it is only text, it is an anonymous inline box, such as span;
• Line boxes (line boxes). Each line is a line box consisting of inline boxes. If the line breaks, it is two line box;
• A ining box consists of a row box, such as p;

 

The height of inline elements is determined by the Row Height;

The height is not the row height, but the content area and row spacing,Line-height = content area + line spacing);

 

Line-height: normal; (default value, which is related to font-size and font-family)

Line-height: number; (calculated based on the font-size. The result of multiplication is the Row height)

Line-height: length; (fixed value, em, rem, px)

Line-height: percent; (calculated based on font-size)

Line-height: inherit; (the inherited row height. The default Row height of input is normal)

The reading class website is generally set to 1.5; the website development matches 20px (20/font-size );

Body {font-size: 14px; line-height: 1.4286}

 

Image bottom gap

In case of text/Text mixing, the inline element vertial-align is aligned with the baseline by default. In this case, the container height = text line height-baseline position height + inline element height, therefore, there will be a gap below the image;

How to eliminate the bottom gap:

• Change the Image Element type. vertical-align is only valid for inline and inline-block elements, and will not be affected after the image is set to display: block;
• Picture bottom line alignment, vertical-align: bottom;
• The parent container row is small enough to move online. The parent container is set to line-height: 0 or font-size: 0;

The Code is as follows:

<! DOCTYPE html> View Code