Table of contents
Fourth, the relationship between line-height and font-size
Introduction: font-size is the style attribute of font in css, pay attention to distinguish it from the text attribute text-xxx. Because text is composed of individual characters, font properties also affect text properties.
1. Font box
The font box is the specified height used when designing the font, and this height will not change once determined. The width of the font box will be modified according to the proportion. The font-size attribute refers to the height of the font box. The baseline of any font is the horizontal line below the letter x of the current font.
The relationship between font-size and line-height is as shown in the figure below. The height of the blue background color in the figure below is the line-height. When the font-size is smaller than the line-height, the blue frame will enclose the font. In fact, this blue background is the value of the box model property height
Due to some characteristics of font design, some customary agreements of fonts are as follows: Although there are restrictions on the font frame, for the sake of font aesthetics, the phenomenon of exceeding the font frame exists. For example letters: f, j, g, etc., but none of them can exceed the upper font box.
Two, font-size attribute
The unit is px, and the value is greater than 0. The default is medium. This property will be inherited.
Syntax:
font-size : absolute-size | relative-size | length
Parameters:
1. absolute-size: adjust according to the object font. xx-small | x-small | small | medium | large | x-large | xx-large
2. relative-size: relative to the size of the font in the parent image. Calculated using scaled em units. larger | smaller
3, length: percentage | A length value composed of floating-point numbers and unit identifiers, which cannot be negative. Its percentage value is based on the size of the font in the parent object.4、<percentage>
Specify the text size in percent. Its percentage value is based on the size of the font in the parent object. Negative values are not allowed.
The default is the medium value of absolute-size
Three, line-height attribute
The value has a fixed value, the unit is px, such as 100px. There are also relative values, such as the number 1.5 means 1.5 times the font-size. The default value is normal. Can also be a percentage: 150%. In addition, the value of line-height cannot be less than 0.
Fourth, the relationship between line-height and font-size
Many attributes such as css attributes such as boder, width, and height are not explicitly specified, but they also exist by default, and the default values are used. For example, when the width and height are not specified, it will be automatically expanded by the content to automatically generate a box. When line-height is not specified, its value is normal, that is, it is automatically determined by the browser, and the browser will select an appropriate line-height value according to the font size of the content.
The font-size is affected when the line-height is manually specified, but the line-height can also be manually specified. After specifying, the change of the line-height will not cause the change of the font-size, nor will it be affected by the font-size. When the line-height is smaller than the font-size, fonts will overlap. When the line-height is 0, the height of the box at this time is also 0, causing the background color to disappear.
Also, the height property is affected by line-height.
Since the box model attribute height is determined by the line-height attribute, when height=line-height, the single-line text will be centered .