line-height与图片底部间隙的学习整理转述
前言：這是筆者學習之后自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！
?
看大牛張鑫旭的視屏可能會理解的更深一些，點擊這里；
line-height，兩行文字的基線之間的距離；
基線，英語本子中就有，頂線，中線，基線，底線；
行內框盒子模型：
- 內容區域（content area），一個圍繞文字的看不到的盒子，相當于鼠標選i中時的區域，只和font-size、font-family有關；
- 內聯盒子（inline boxes），不會讓內容成塊顯示，而是排成一行（inline），如果只是文字，就是匿名內聯盒子，如span;
- 行框盒子（line boxes），每一行都是一個行框盒子，由內聯盒子組成，如果換行，那就是兩個行框盒子；
- 包含盒子（containing box），由行框盒子組成，如p;
?
內聯元素的高度是由行高決定的；
高度的表現不是行高，是內容區域和行間距， 行高(line-height) = 內容區域高度(content area) 行間距(vertical spacing)；
?
line-height:normal;（默認值，與font-size和font-family有關）
line-height:number;（根據font-size大小計算，相乘的結果就是行高）
line-height:length;（固定值，em、rem、px）
line-height:percent;（根據font-size計算）
line-height:inherit;（繼承行高，input默認的行高是normal）
閱讀類網站行高一般設置1.5就好了；網站開發匹配20px（20/font-size）;
body{font-size:14px; line-height:1.4286}
?
圖片底部間隙
圖文混排的情況下，inline元素在默認情況下的vertial-align是baseline（基線）對齊的，這時容器高度 = 文字行高 - 基線位置高度 inline元素高度，所以圖片下邊會有一段間隙；
消除底部間隙的方法：
- 改變圖片元素類型，vertical-align只對inline和inline-block元素有效，圖片設置display:block之后就不受影響了；
- 圖片設置底線對齊，vertical-align：bottom；
- 父容器行高足夠小，基線上移，父容器設置line-height：0或者font-size：0；
? ?
代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.wrapper{width: 300px;background: #0ff;margin: 100px;line-height: 0;/*font-size: 0;也可以哦，0*0=0 */}.wrapper img{width: 150px;}</style></head><body><div class="wrapper"><img src="images/1.jpg"/></div></body> </html> View Code?
總結
以上是生活随笔為你收集整理的line-height与图片底部间隙的学习整理转述的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css常用属性总结：颜色和单位
- 下一篇： css常用属性初总结:伪元素和伪元素