Home > Web Front-end > HTML Tutorial > What does line-height mean? The difference between line-height with units and without units

What does line-height mean? The difference between line-height with units and without units

云罗郡主
Release: 2018-10-30 14:30:05
Original
34544 people have browsed it

How to use lineheight attribute? What does line-height mean? For newcomers who have just come into contact with CSS, they may not know much about line-height with units and without units. Let's talk about the difference between line-height with units and without units?

1: What does line-height mean?

line-height is used to indicate line height and is used to control the spacing between text. We can use line-height to Set the center position of the table, or use line-height to indicate the length of the content in the table.

Usage:

<div style="height:100px">
php中文网
</div>
此时,文本"php中文网"会在整个div的左上角。
<div style="height:100px;line-height:100px">
php中文网
</div>
Copy after login

The effect is as follows:

What does line-height mean? The difference between line-height with units and without units

##2: The difference between line-height with units and without units

In the above code, we can see that there is a px unit in line-height:100px. So what is the difference between line-height with units and without units? Let’s look at a picture first:

What does line-height mean? The difference between line-height with units and without units

Many people will not feel unfamiliar when they see it, and they will think it is caused by line-height. In fact, in order to achieve vertical centering of a line of text, we will give line-height Add a fixed value, and sometimes, when we adjust the line spacing, we usually add px or percentage. In this case, we do not consider inheritance, and there will be no problems. We use When it comes time to inherit, there will be more problems than early summer.

In fact, as long as line-height is inherited, overlap will occur. If there are numbers and units behind line-height, the inherited value will be converted to a specific value. If there is no unit behind, Just inherit the value directly, and it will be recalculated based on its own attributes.

The above is what does line-height mean? A full introduction to the difference between line-height with units and without units. If you want to know more about

HTML video tutorial, please pay attention to the php Chinese website.


The above is the detailed content of What does line-height mean? The difference between line-height with units and without units. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template