The difference between height and line-height in css

This article mainly introduces the difference between height and line-height in css. Friends in need can refer to 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, and height can be all The height of the element

Will the edges overlap after the text is enlarged?

Line-height is straightforwardly understood as 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 appear beyond the line height range. overlapping.
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 a blank line-height around the text of 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.

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 The difference between height and line-height in css. For more information, please follow other related articles on the PHP Chinese website!