Analysis of line height inheritance in CSS
This article mainly explains "analysis of line height inheritance problem in CSS". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "analysis of line height inheritance problem in CSS" together.
In css, the line-height attribute is used to set the amount of space for multiline elements, such as text. For block-level elements, it specifies the minimum height of the element row box. For non-substituted inline elements, it is used to calculate the height of the rowbox.
line-height syntax
/*Keywordvalue*/
line-height:normal;
/*Unitlessvalues:usethisnumbermultiplied
bytheelement'sfontsize*/
line-height:3.5;
/*values*/
line-height:3em;
/*values*/
line-height:34%;
/*Globalvalues*/
line-height:inherit;
line-height:initial;
line-height:unset;
line-height value
Normal depends on the client. Desktop browsers (including Firefox) use a default value of about 1.2, depending on the font-family of the element.
The applied value of this attribute is this unitless number multiplied by the font size of the element. The calculated value is the same as the specified value. In most cases, this is the recommended way to set line-height and does not produce indeterminate results when inheriting.
Specifies the height used to calculate the linebox. See for possible units. Values in em may produce inconclusive results.
Relates to the font size of the element itself. The calculated value is the font size calculated by multiplying the given percentage value by the element. Percentage values can lead to inconclusive results.
After testing, in the above several forms, values with units will be inherited by sub-elements, and only values without units (such as 1.2) or normal will not be inherited.
Test Code:
div{
font-size:14px;
}
.p1{
line-height:21px;
}
.p2{
line-height:1.5;
}
.p3{
line-height:150%;
}
.p4{
line-height:1.5em;
}
.p5{
line-height:normal;
}
h2{
width:8em;
overflow-wrap:break-word;
font-size:28px;
}
Thank you for reading, the above is the content of "CSS line height inheritance problem analysis", after the study of this article, I believe that everyone has a deeper understanding of CSS line height inheritance problem analysis, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
