Understanding and Application of line-height

Source: Internet
Author: User

|Line-height and line boxes height

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





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.





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




(<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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.