css規定font-size的大小實際上是字體的高度
可以將內容區理解為font-size的大小.
行內高可以理解為 ( (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，因此可以認為它的內容區的高度是24px,它的line-height繼承于父節點p(line-height: 12px)，所以其半行間距為(12px-24px)/2 = -6px , 它的行內高是內容區的高度 加上 上行間距 和 下行間距為,24px-6px-6px =12px

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。