Home  >  Article  >  Web Front-end  >  css uses line-height method without unit

css uses line-height method without unit

不言
不言Original
2018-06-21 15:31:542577browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn