在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 為什么當(dāng)行高變成0的時(shí)候，文字會(huì)落在上邊框一半位置？

為什么當(dāng)行高變成0的時(shí)候，文字會(huì)落在上邊框一半位置？

.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
  line-height:0px;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

為什么當(dāng)行高變成0的時(shí)候，文字會(huì)落在上邊框一半位置？

clipboard.png

回答
編輯回答
愿如初

一樓關(guān)于行高和字體大小間關(guān)系說(shuō)的很有條理，點(diǎn)個(gè)贊

2018年6月20日 07:37
編輯回答
心上人

樓上答的很清楚，我沒什么好補(bǔ)充的，為樓上點(diǎn)贊。

2017年3月27日 13:21
編輯回答
你的瞳

行高有一個(gè)特性，叫做垂直居中性。line-height的最終表現(xiàn)是通過(guò)line boxes實(shí)現(xiàn)的，而無(wú)論line boxes所占據(jù)的高度是多少（無(wú)論比文字大還是比文字?。湔紦?jù)的空間都是與文字內(nèi)容公用水平中垂線的。

來(lái)自http://www.zhangxinxu.com/wor...

2017年11月18日 01:43
編輯回答
孤巷

首先要清楚，line-height 默認(rèn)值不是 0 ，是 normal,所以如果有兩行，默認(rèn)的 line-height 實(shí)際下圖兩張紅線的距離：

clipboard.png

這個(gè)不好測(cè)試，這里，我們?cè)O(shè)置

font-size:16px;
line-height:18px;

方便測(cè)試講解；

通常 line-height 大于 font-size，這樣，就會(huì)在字體上方和下方加上半個(gè)行間距，在這里，行間距就是 2px,字體的上方和下方各有 1px,通常 line-height 通過(guò)影響行間距來(lái)影響視覺效果；

clipboard.png

這里就是第一行的下半間距+第二行的上半間距，形成了行間距 2px; 如果把 line-height 改為 16px，兩行就正好連在一起，如圖：

clipboard.png

行間距=(line-height) - (font-size)

放到這個(gè)公式里，

line-height:0;
font-size:16px

結(jié)果就是 行間距 = -16px;所以字體上下半行間距等于-8px,所以字體往上移 8px(相比之前上半間距1px就上移9px ), 這也就是題主問(wèn)的：

為什么當(dāng)行高變成0的時(shí)候，文字會(huì)落在上邊框一半位置？

另外，由于字體上下半行間距等于-8px，上下一起移的結(jié)果就是，所有的文字在同一行，出現(xiàn)覆蓋；

clipboard.png

參考文檔：CSS權(quán)威指南-中-第3版-掃描版.pdf

2017年11月15日 13:35