css規(guī)定font-size的大小實(shí)際上是字體的高度
可以將內(nèi)容區(qū)理解為font-size的大小.
行內(nèi)高可以理解為 ( (line-height) - (font-size) ) /2 然后再font-size 的上下加上前面的值
看下面的例子

<p style="font-size:12px;line-height:12px;">this is text, <em>some of which is emphasized</em>, plus other texr <br>that is <strong style="font-size:24px;">strong</strong>and<span style="vertical-align:top;line-height:18px;">tall</span> and that is<br>larger than the surrounding text.</p>

效果如下:

可以看到strong明顯的高于上下文
分析下strong元素,其font-size為24px，因此可以認(rèn)為它的內(nèi)容區(qū)的高度是24px,它的line-height繼承于父節(jié)點(diǎn)p(line-height: 12px)，所以其半行間距為(12px-24px)/2 = -6px , 它的行內(nèi)高是內(nèi)容區(qū)的高度 加上 上行間距 和 下行間距為,24px-6px-6px =12px

對(duì)于span元素,
其font-size繼承父節(jié)點(diǎn)p(font-size:12px),line-height:18px;故半行邊距為(18px-12px) /2 = 3px, 所以其內(nèi)容區(qū)為12px, 其行內(nèi)框?yàn)?br /> 12px + 3px(上行邊距) + 3px(下行邊距). =18px ,
可以注意到,span 還有一個(gè)vertical-align:top 屬性, 改屬性是指,span的垂直對(duì)齊方式是其行內(nèi)框的頂端與行框的頂端對(duì)齊,
而行框是(所以行內(nèi)框中)最高行內(nèi)框的頂端.

具體參考《CSS權(quán)威指南》(第3版) P192~P194

總結(jié)

以上是生活随笔為你收集整理的css --- 行内框和内容区的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。