我感到困惑line-height的inline元素。我一直在搜索：http://www.w3.org/TR/CSS21/visudet.html#inline-non-replacedhttp://www.w3.org/wiki/CSS/Properties/line-heighthttps://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height但是我不確定我是否理解。我知道如果將display：inline-block轉換為block，我可以使高度正確。但是我試圖理解的是行高內聯元素是如何工作的。這里是問題：我有一段文字，font-size: 15px但是如果看到瀏覽器的開發人員工具，它將顯示18px。為什么？該font-size只是aproximate？還是不能衡量起伏？為什么背景色inline元素不具有相同的height比line-height？的line-height在inline元件測量線箱的空間，即空間的上方和下方的線，而不是inline元素本身。這是解釋嗎？CSS：#block-element { font-family: 'verdana', sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; color: black; margin: 0; background-color: grey;}#inline-element { -webkit-box-sizing: border-box; font-family: 'verdana', sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; color: black; margin: 0; background-color: green;}<div id="block-element"> <a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a></div>
2 回答
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
這可能會造成混淆，因為在內聯格式模型中，高度是不同的。
內聯框的高度
的元素會display: inline生成一個內聯框：
一個行內框是一個既行內和其內容參與其含有內嵌格式化的內容。
display值為的不可替換元素將inline生成一個內聯框。
并line-height確定該盒子的高度：
內聯框的高度將所有字形及其兩邊的前導部分包圍起來，因此正好是“行高”
因此，您的盒子實際上15px很高。
線盒高度
還有線框：
在內聯格式設置上下文中，框從一個包含塊的頂部開始以一個接一個的水平排列。這些框之間應注意水平邊距，邊框和填充。這些框可以以不同的方式垂直對齊：它們的底部或頂部可以對齊，或者其中的文本基線可以對齊。包含形成線的框的矩形區域稱為線框。
線框的高度由線高計算部分中給出的規則確定。
如果一個行框僅包含非替換的行內框與同line-height和vertical-align，那些規則說，行框的高度由下式給出line-height。
因此，就您而言，這也是15px。
內聯框內容區域的高度
但是，您的瀏覽器的開發人員工具說18px。那是因為那18px是內容區域的高度。這也是由綠色背景繪制的內容區域（以及填充）。
注意，這些18px可能會有所不同，因為CSS 2.1沒有指定算法：
內容區域的高度應基于字體，但是此規范未指定如何。UA可以例如使用em-box或字體的最大升序和降序。（后者將確保在em-box上方或下方具有部分內容的字形仍位于內容區域內，但是導致不同字體的大小不同的框；前者將確保作者可以控制相對于'line-height'的背景樣式。 ，但會導致字形在其內容區域之外繪畫。）
如果UA實施第一個建議，則內容高度將由font-size決定，該高度決定了em-box。這就是您期望的，綠色框15px很高。
但是，大多數UA似乎都沒有這樣做。這意味著高度可能是font-family和中font-size使用的最高字形的高度。
但是使用font-size值15px并不意味著最高的字形也會15px很高。這取決于字體。這有點類似于normal的初始值line-height，定義為
告訴用戶代理根據元素的字體將使用的值設置為“合理”的值。我們建議使用介于
1.0到之間的“正常”值1.2。
這意味著，如果您使用font-size: 15px，則line-height在15px和之間將是“合理的” 18px。Firefox認為“ Verdana”字體是最好的18px。在“ sans-serif”中，它使用17px。
叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
#block-element {
font-family: 'verdana', sans-serif;
font-size:15px; line-height:15px;
text-decoration: none; color:black;
margin:0;
background-color:grey;
}
#inline-element {
-webkit-box-sizing: border-box;
font-family: 'verdana', sans-serif;
font-size:15px; line-height:55px;
text-decoration: none; color:black;
margin:0;
background-color:green;
float:left;
}
<div id="block-element">
<a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>
**和線高在塊元素上工作時，您將線高設置為200px，元素高度將設置為200px，內部元素的中間高度為200px **
內聯元素無法讀取高度和填充頂部和底部的填充，我們需要閱讀此屬性，我們必須應用任何具有布局屬性（例如float，display：inline-block或block）
如果添加float：left或disply：block css屬性，僅行元素的行高度和填充屬性將在代碼中讀取行高度和填充屬性將起作用
在只添加hasLayout的屬性你的代碼內聯元素工作作為一個塊級元素
- 2 回答
- 0 關注
- 487 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消