[CSS] Line-height

Original: http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6% b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%e5%8f%8a%e5%ba%94%e7%94%a8/

The height of the CSS in the role of the should be the height and line-height it! If a label does not define a height property (including a percentage height), then the height of its final performance must be determined by the Line-height function

In the end, how high is the height of this line-height line? In the inline box model, there is a line boxes, this thing is invisible, the work of this thing is wrapped in every word. A line of text boxes. For example, "Iverson retired" The 5 words, if they are displayed in a row, you Iverson again, sorry, only a line boxes cover you; but "Chun Brother pure Man" 5 words, if the vertical writing, one line, that is really enough man, a word to cover the lines boxes, So a total of five line boxes. Line boxes what features are not, on the height. So the height of a div without setting the height attribute is made up of the height of a line boxes.

In fact, line boxes is not a direct producer, belongs to middle-level cadres, the real work is its hands –inline boxes dry, these men are words, pictures ah, span, such as the label of the inline property. Line boxes is just an investigation report personnel, to examine its staff who's actual line-height value is highest, who is the highest, it will be the value of who, and then report upward, the formation of height. For example, <span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span> . The height of line boxes is 40 pixels.

Four, the vertical center of row height
The row height also has a feature called vertical centering. Line-height's final performance is achieved through line boxes, regardless of the height of the line boxes (whether larger or smaller than the text), the space occupied by the text content of the common level perpendicular bisector. Take the above picture for a while.

See the result of test1, at this time line boxes height is 0, but it is the horizontal perpendicular bisector symmetrical distribution of the text. This important feature can be used to achieve vertical center alignment of text or pictures.

V. Application on single or multi-line or picture vertical Center implementation

You can ruthlessly click here: line height implementation single line and multiline text vertically centered demo

1. Vertical center alignment of single-line text
This is said on the Internet, the Line-height value is set to the same size as the height of the value can achieve the vertical center of single-line text. This is indeed true, but there are problems in fact. The problem is height, look at my statement: "Set the line-height to the size of the box you need to achieve the vertical center of single-line text", the difference is that I removed the height, this height is superfluous, you do not believe you can try it yourself.

2. Vertical centering of multiline text
To achieve the height of the text perpendicular to the vertical center using the padding is good. For a high-fixed div, the text line or multiline display, the font size has a lot of small situation how to do? One way is to use Line-height.

Comment Diagram for demo page:

As mentioned above, the height of line boxes depends on the maximum height of its subordinates. This height is accomplished by a space that does not occupy any space, even if the font-size is set to 0,line-height for the desired height. At the same time, we need to set the display property to Inline-block in order to separate line boxes and to keep it on one row. The following code is different from the demo:

CSS code:

. mulit_line{line-height:150px, border:1px dashed #cccccc; padding-left:5px; font-size:0;}. Mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}. Mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle;}

Thanks to Konishi's reminder, the following code fixes the IE8 issue:

. mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}. Mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}. Mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

HTML code:

<p class= "Mulit_line" >    <span style= "FONT-SIZE:12PX;" > Here is a multiline text within a 150-pixel height tag, with a text size of 12 pixels. <br/> Here is the second line, which is used to test the display effect of multiple rows. </span><i>&nbsp;</i></p>

The effect is shown on the annotation chart. has been tested for compatibility with mainstream browsers other than IE8. Have seen previously said IE8 line-height some problems, if who found IE8 under the problem, welcome to point out, not very grateful.

3, the vertical center of the picture
You can click here: Row height Centers the picture vertically to show the demo
This method is explained in detail in the last additions in the article "the size of the picture, the horizontal vertical center of multiline text." There's not much to say here.

ZXX: Previously failed to test under IE8, it is now found that this method is not only problematic under opera, but also poorly behaved under IE8. So just use the vertical center of the line-height to be considered, perhaps using the same method as the vertical center of the above multiline text to achieve the vertical center of the image effect.

The application of the line height in the article display
The General social web site will have the ability to post or write logs, in which post-published articles are also learned, one of which is the Line-height line high.

The first thing to know is how to represent the height of a row: Px/em, or normal, or percent, or value, or inherit inheritance.

In the box that displays the article, the PX representation is first to be eliminated. Because the text inside the article is large and small, using PX fixed value, due to inheritance, can not be achieved according to the size of the text automatically adjust the spacing, there will be big text overlap phenomenon. Normal is also not good, the general article shows that it is best to be 650 pixels wide, 1.5 times times the line spacing is better. The normal value of the general browser between 1~1.2, the use of normal text spacing is too small, the difficulty of reading. Hundred points also have inheritance, but there is a very rubbing way to achieve the text spacing automatically adapt to the size of the text, that is, the use of "*" wildcard characters, such as: There will .article_box *{line-height:150%;} be no text overlap situation. NetEase Blog is the use of this method, for the certificate:

Why this method is rubbed, using "*" wildcard characters greatly increase the rendering of CSS, inefficient, and there is a better way to use the value. 150% Although the value is the same as 1.5, but they are also different, the difference is the inheritance, the use of percentages will calculate the value of Line-height, and then in px pixels to inherit, and 1.5 is to inherit the value of 1.5, traversed to the label and then calculate the pixel value to line-height. So the same effect just needs to .article_box{line-height:1.5;} be achieved.

Vii. avoid haslayout by using high-line height instead of heights
In some cases, line-height can be interchanged with height because the effect is the same. Can open a height, however, there is a more subtle difference between the two CSS properties, which is that using height makes the label haslayout, while using line-height does not. Previously only IE6 used to use height to clear the float, is the use of IE height to make haslayout properties. But sometimes, haslayout do not need to, but to avoid.

Read my front about the adaptive button article people may find that I used line-height instead of height, because: ie6,ie7, similar to the Inline-block attribute element if there is a block attribute element, if the block Haslayout, the label will break through the display of external inline-block and width 100% display, from the effect of making the button adaptive text size, the solution is to use line-height instead of height.

[CSS] Line-height