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 >中就可以了。