Home  >  Article  >  Web Front-end  >  The difference between height and line-height in css

The difference between height and line-height in css

巴扎黑
巴扎黑Original
2017-06-28 09:59:272531browse

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.

The code is as follows:

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

Statement:
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