In-depth understanding of line-height in css-CSS Tutorial-php.cn

In-depth understanding of line-height in css

零下一度

Release： 2017-06-19 11:57:15

Original

2034 people have browsed it

Syntax:
line-height: normal | length
Parameters:
normal: Default line height
length : Percent number | A length value consisting of a floating point number and a unit identifier. Negative values are allowed. The percentage value is based on the height size of the font. See Length Units
Description:
Retrieves or sets the row height of the object . That is, the distance between the bottom of the font and the top of the inside of the font.
If there are multiple objects in a row, the maximum row height is applied. At this time, the row height cannot be a negative value.
The corresponding script feature is lineHeight. Please see other books I have written.
Example:

div {line-height:6px; } 
div {line-height:10.5; }

Copy after login

What is the difference between line-height and height in CSS?

Simply put, line-height means line height, and height defines the height of the element itself.
For example, the following code

Text text text text text text text text text text text text text text text text text text text< ;/div>
If we define .test {line-height:20px;}, then the actual height of this element will depend on the content. If the text part is displayed as a line in the browser, then the div The actual height is 20px. If the text is displayed as two lines, then the actual height of the div is 40px, and the line height of the text is 20px;
If we define .test{height:40px}, then the actual height of this element is average It will not change due to the amount of content. If the text is displayed as one line, the height of the div will still be 40px. If it is displayed as 2 lines, but the line height of the text is less than 20px, the height of the div will not change due to the text content. The height is less than height and changes. However, if the height of the text content is greater than 40px, generally speaking, the height of the div will increase accordingly.

line-height and line boxes height
Height and line-height should play the role of height in css! If a label does not define the height attribute (including percentage height), then its final displayed height must be determined by line-height, even if the default height bug under IE6 is about 11 pixels. Let me tell you slowly.

Let’s first talk about a phenomenon that everyone is familiar with. There is an empty div,

. If the height value is not set to be at least greater than 1 pixel, the height of the div will be 0. . If a space or text is entered in the div, the div will have a height. So have you ever thought about why there is a height after there is text in the div?

This is a seemingly simple question, but it is a very important question to understand line-height. Some people may think that it is because the words are holding it open! The text takes up space and naturally stretches the div. I understood it this way at first, but in fact, after deeply understanding the inline model, I found that it is not the text that expands the height of the div, but the line-height!

Notes on line-height

1. Using line-height only works for text and is invalid for pictures
2. Use Dreamweaver to see the real-time line-height effect
3. Negative values cannot be used for this value, and it will be invalid if used
It should be noted that in each browser, for line-height There are also subtle differences in the resolution of height. There will be a 1px difference between the top and bottom. If the line height is an even number, most browsers will interpret it normally. If it is an odd number, some browsers will have 1px more than the bottom, while others will Some browsers will add 1px more at the bottom than the top. For some websites with strict requirements, it is recommended to use an even number when designing the line height

The above is the detailed content of In-depth understanding of line-height in css. For more information, please follow other related articles on the PHP Chinese website!