Home > Web Front-end > HTML Tutorial > Detailed explanation of the difference between line-height and height

Detailed explanation of the difference between line-height and height

WBOY
Release: 2017-06-28 11:58:11
Original
2873 people have browsed it

line-height: line height sets the upper and lower distance between text
height: height is to define the height of a layer or something

In other words, line-height refers specifically to the height of a single line, height Can you set the height of all elements

Will the edges overlap after the text is enlarged?

The straightforward understanding of line-height is the height of the text plus the blank area above and below the text. It is best not to set the unit for line-height. If the unit is fixed, the line height is the determined value.

When the font is enlarged and the line-height of the element is not set (inherited from the parent element and the parent element is a fixed value) or its value is a fixed value, the text will exceed the line height range and overlap.

line-height has inherited properties, so it is best to set the line-height of the text part to the number 1.5, which is the height of the font height * 1.5.

In this way, the line height will follow the font Zoom follows zoom.

How to set the text and picture to be centered within the line?

Line-height defaults to the baseline. You can use vertical-align:middle to center align the text and image.

How to make it easier to read?

Inline text background color #fff, text color #333; there is space around the text line-height 1.25-1.5 to reduce the sense of oppression. The main text size is 14px, and the other can be 12px.

input button All browsers behave the same.

The default linde-height value of firefox defaults to normal and needs to be specified explicitly.

button, input[type="button"], input[type="submit"] { 
line-height:normal !important; 
} 
input.button, a.button, button { 
font: bold 12px Arial, Helvetica, sans-serif; 
padding: 5px 8px; 
overflow:visible; 
}
Copy after login


The above is the detailed content of Detailed explanation of the difference between line-height and height. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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