line-height和height的區別

line-height 是指每行的高度, 假如定義p標籤的行高爲line-heigth:20px; 文字在瀏覽器中顯示爲一行時，這個p標籤的高度會爲20px，若是爲兩行，則p標籤的高度爲40px; line-height是20px不變, 只是height變了

 

可是，咱們定義p的樣式爲height:20px,那麼這個元素的高度並不會由於內容的多少而改變，若是顯示爲2行，文字的總高度超出了，這個p標籤的高也不會隨着文本而改變。

 

 

技巧一 
行高等於元素高，可將文本內容垂直居中

p{ height: 50px; line-height: 50px; background: yellowgreen; width:100px; }
<p>測試文本</p>

• 1
• 2

• 1
• 2

行高儘可能不要大於元素高。若是行高大於元素高，多個相同的結構下很容易出現錯位 

技巧二 
設置高度和瀏覽器同樣高 
效果： 

你設置高爲100%，再設置邊是不起做用的。須要把html和body一塊兒設置爲100%，完整代碼以下

html,body{ height: 100%; overflow: hidden; } body{ border:10px solid red;}

• 1
• 2

• 1
• 2

寫在< style >中就能夠了。