Home > Article > Web Front-end > 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!