css uses line-height method without unit

This article mainly introduces the method of using line-height without units in css. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

line-height is It can be inherited, so child elements do not need to repeatedly define line-height. We usually also bring units at the end (such as: line-height:22px; or line-height:1.4em;), but line-height brings trouble to people because of this inheritance and the units added later

Sometimes, in order to achieve vertical centering of a single line of text, we will give line-height a fixed value that is the same as height; sometimes, in order to adjust the line spacing of a specific paragraph of text, we usually consider Use percentages or relative size ems. Maybe it's a habit, so we are all used to line-height having units. In these cases, we do not need to consider line-height inheritance and will not find any problems. Of course, when we use line-height inheritance, we will find the problem.
For example, the following code:

CSS:

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML:

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

If the line-height attribute value has units, then the inherited value is A specific px-level value after conversion (calculate first and then inherit); and if the attribute value has no unit, the browser will directly inherit this "factor (value)" instead of the calculated specific value. At this time, its line-height will be recalculated based on its own font-size value to obtain a new line-height value (inherited first and then calculated).

For example, there is a p and a sub-element p, and the line-height of p is 150%. Since the default font size is 16px, the specific line-height value of p can be converted to 16px * 150% = 24px. Since the line-height of p will inherit the converted specific value of 24px, p is redefined as font-size:30px; the font size exceeds the size of line-height, so overlap occurs. The principle of other units is the same.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About CSS How to use background

#About how to use the table-cell attribute in CSS

The above is the detailed content of css uses line-height method without unit. For more information, please follow other related articles on the PHP Chinese website!