Understanding and Application of line-height

|Line-height and line boxes height

Line-height (line-boxes) rather than the font size

Code:

　　

Effect:

　　

NOTE: If there is no content in the element, the height will not be supported, because line-boxes is 0, even if line-height is specified, it will not work, as long as there is content, the line height takes effect (this is the line-height of the vertical center P of the following lines)

| Vertical center alignment of single-line text
"Setting the line-height value to a value of the same size as height enables vertical center of a single line of text ", this sentence can be replaced by "setting line-height to the size of the box you need can achieve vertical center of a single line of text". The advantage is that the height is removed.

Code:

　　

Effect:

　　

| Vertical center of multi-line text

You can use padding to vertically center unfixed text. What should I do if the font size of a div with a fixed height is large or small when one or more lines of text are displayed? One of the methods is line-height.

The height of line boxes depends on the highest height of its employees. The height is completed by a space that does not occupy any space. Even if the font-size is set to 0, the line-height is the required height. At the same time, to separate line boxes and keep them on one line, you must set the display attribute to inline-block.

CSS code:

　　.mulit_line{ line-height: 150px; background: #0af; 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;" class = "mulit_line_span"> multiple lines of text in a label with a height of 150 pixels, the text size is 12 pixels. <Br/> the second line is used to test the effect of multiple rows. </Span>
<I class = "mulit_line_ I"> </I> </P>

 

Effect:

　　

(<I> it means that my row height is 150px, And I am vertically centered. You and I are in the same row, and all you have to be vertically centered like me ;)

Add a way to make all labels under each browser (ff1-3, IE6-8, chrome, opera) implement something similar to display: inline-block:

　　Display:-moz-inline-stack; display: inline-block; * display: inline; ZOOM: 1;
Note: It is enough to make the line elements (such as the span and a labels), display:-moz-inline-stack, and display: inline-block.
To implement the inline-block of block elements, display:-moz-inline-stack; display: inline-block; * display: inline; ZOOM: 1; is required;
All, where display:-moz-inline-stack; display: inline-block; for Firefox, chrome, opera, IE8, and * display: inline; ZOOM: 1; for IE6 and IE7.

|Use Row Height instead of height to avoid haslayout

In some cases, line-height can be exchanged with height because it achieves the same effect. You can open up a height. However, there is a hidden difference between the two CSS attributes, that is, using height will make the label haslayout, but using line-height will not.

In IE6 and IE7, if an element similar to the inline-block attribute has a block attribute, if the block haslayout, the label will break through the display of the external inline-block, and the display width is 100%. The solution is to use line-height instead of height to make the button adaptive text size ineffective.

CSS code

　　.out{display:inline-block; background:#a0b3d6; margin-top:20px;}　　.in1{display:block; height:20px;}　　.in2{display:block; line-height:20px;}

HTML code

　　<span class="out">　　<span class="in1">height:20px;</span>　　</span>　　<span class="out">　　<span class="in2">line-height:20px;</span>　　</span>

Effect :,

　　

The former breaks through the limit and the width is directly 100%, while the latter adapts the internal text

(For more information, see Zhang xinxu's blog)