[CSS Learning] Line-height Properties Explained

Note: This article can be used as Zhang's teacher in the course of online lectures on learning notes

Defined

Line-height: By checking the MDN document

For block-level elements, the CSS property line-height specifies the minimum height of the line-boxes inside the element. For non-substituted inline elements, the line-height is used to calculate the height of the line box. For elements such as button/input, which are substituted for inline elements, Line-height has no effect.

Check the CSS reference manual,line-height indicates the distance between the bottom of the font and the top of the font , should be inaccurate.

Mr. Zhang said: line-height represents the distance between two baselines

The definition of an MDN allows you to know that the height of the inline element is determined by the line-height, not by the font size.

Height mechanism

1. Row high line-height have inheritance and influence everywhere.

2. The height of the performance does not lie in the row height, but in the content area and the line spacing.

Content area Height + line spacing = row height

Content area height is only related to font and size

Take value

There are four types of line-height values: normal <number> <length> <percentage>

Normal depends on user-agent, which is related to font-family. In general, the Line-height will be reset inside the reset.css.

<number> No unit number, the actual calculated value =number* font size, preferred method.

<length> to calculate the height of the line box

<percentage> relative to the font size of the element itself, the actual computed value =percentage* the font size calculated by the element

Inherit row high inheritance, input and other elements default row high value is normal, by using inherit can make the text box style more controllable

Subtle differences

Line-height=<number> all inheritable elements to recalculate row heights based on Font-size

Line-height=<percentage>/<length> the current element inherits to the child element according to the font-size calculation row height

Line-height and pictures of those things

If you eliminate the bottom gap of the picture:

1. The image is blocky so that there is no baseline alignment

2. Picture set bottom line alignment, default picture and text is baseline alignment baseline

3. Set the line height sufficiently small to move the baseline position up line-height:0;

Application:

1. Small picture, large text (picture and text centerline alignment)

Preserves the inline character of the image, sets the font size and row height of the text, and sets the vertical-align feature of the picture to achieve some effects

such as Img{vertical-align:bottom;} Picture and text keep the bottom aligned

Img{vertical-align:middle.} picture and text remain centerline aligned

2. Non-fixed image, multiline text vertically centered

A. The horizontal center of the picture:

Picture external container Settings {line-height: <length>; text-align:center;}

img{Vertical-align:middle; The picture is centered on the myopia, the subtle thing is that there is hidden text, so the deviation is related to font and size.

B. Multi-line text horizontally vertically centered

Set external container {line-height, text-align:center;}

Internal text tags need to modify display to convert to the same inline-block as the picture, while resetting the externally inherited Text-align and Line-height property values {text-align:left; vertical-align:middle ;}

Set max-width:100% when necessary;

[CSS Learning] Line-height Properties Explained