Detailed explanation of the difference between line-height and height

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; 
}

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!