Explore Line-height

1. Definition
Line height: The distance between two lines of text baseline (baseline)

：

2. Why Line-height can have a single line of text centered vertically
In fact, there is no vertical center, unless it will font-size:0;

3.line-height Height principle (you can see the principle of the inside of the box first)
* The height of the element within the line is determined by line-height, not by Font-size,
* Row height because of its inheritance, influence everywhere, even if single-line text is no exception
* Line height is only behind the curtain, high performance is not high, but the content area and line spacing
* Content Area height + line spacing = row height
Content area height As for font size and fonts, it is not related to Line-height

4. Compare useful property values
* LINE-HEIGHT:1.5;LINE-HEIGHT:150%;LINE-HEIGHT:1.5EM;
Actual line-height:font-size*1.5, suitable for page adaptive

Difference
* 1.5: All inheritable elements recalculate row heights according to their own font-size
* 150%/1.5em: The current element calculates row heights based on Font-size, and child elements inherit the row height

  parse: The line height of the div: Line-height:24px*1.5,span row height line-height:60px*1.5  <  div  style  = "background: #eee; font-size:24px;line-height:1.5;"    >  <  span  style  = "font-size:60px;"  >  test 1</ span  >  </ div  >  

Analysis: line height of div: Line-height:24px*1.5,span Inherits Div's Row height line-height:24px*1.5 <  style= "background: #eee; font-size:24px;line-height:150%;" >   <style= "font-size:60px;" > Test 2</span></div>

* Inheritance (ie8+)
The default row height for elements such as the input box is normal, and using inherit can make the text box style more manageable

* Use Experience
body{font-size:14px;line-height:1.4286} = line-height:20px;

The performance of 5.line-height and pictures
* Row height does not affect the height at which the picture actually occupies
* method to eliminate the bottom gap of the picture
A. Image blocky-no baseline alignment img{display:block;}
B. Picture bottom line alignment img{vertical-align:bottom;}
C. Line height is small enough-the baseline position moves up. box{line-height:0;

Practical Application of 6.line-height
* Vertical centering of images with an irregular size (ie8+)

. Box {height:300px; line-height:300px; text-align:center;} . Box>img {vertical-align:Middle; /* Baseline online 1/2 height */}

* Multi-line Text vertical center (ie8+)

. Box {line-height:250px; text-align:center;} . Box>.text {display:inline-block; line-height:normal; text-align:left; vertical-align:Middle;} /* */

* Instead of height, avoid ie6/ie7 under the Haslayout

<span class= "Out" > <span class= "in1" >height:36px;</span></span><span class= "Out" > <span class= "in2" >line-height:36px;</span></span>.out{Display:Inline-block;/*or Float:left*/}. in1{Display:Block;Height:36px;}. in2{Display:Block;Line-height:36px;}/*result: Under the Ie6/ie7, the inline-block of the Out container is changed to block*/

Explore Line-height