我感到困惑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轉(zhuǎn)換為block，我可以使高度正確。但是我試圖理解的是行高內(nèi)聯(lián)元素是如何工作的。這里是問(wèn)題：我有一段文字，font-size: 15px但是如果看到瀏覽器的開(kāi)發(fā)人員工具，它將顯示18px。為什么？該font-size只是aproximate？還是不能衡量起伏？為什么背景色inline元素不具有相同的height比line-height？的line-height在inline元件測(cè)量線箱的空間，即空間的上方和下方的線，而不是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 回答
千萬(wàn)里不及你
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊
這可能會(huì)造成混淆，因?yàn)樵趦?nèi)聯(lián)格式模型中，高度是不同的。
內(nèi)聯(lián)框的高度
的元素會(huì)display: inline生成一個(gè)內(nèi)聯(lián)框：
一個(gè)行內(nèi)框是一個(gè)既行內(nèi)和其內(nèi)容參與其含有內(nèi)嵌格式化的內(nèi)容。
display值為的不可替換元素將inline生成一個(gè)內(nèi)聯(lián)框。
并line-height確定該盒子的高度：
內(nèi)聯(lián)框的高度將所有字形及其兩邊的前導(dǎo)部分包圍起來(lái)，因此正好是“行高”
因此，您的盒子實(shí)際上15px很高。
線盒高度
還有線框：
在內(nèi)聯(lián)格式設(shè)置上下文中，框從一個(gè)包含塊的頂部開(kāi)始以一個(gè)接一個(gè)的水平排列。這些框之間應(yīng)注意水平邊距，邊框和填充。這些框可以以不同的方式垂直對(duì)齊：它們的底部或頂部可以對(duì)齊，或者其中的文本基線可以對(duì)齊。包含形成線的框的矩形區(qū)域稱為線框。
線框的高度由線高計(jì)算部分中給出的規(guī)則確定。
如果一個(gè)行框僅包含非替換的行內(nèi)框與同line-height和vertical-align，那些規(guī)則說(shuō)，行框的高度由下式給出line-height。
因此，就您而言，這也是15px。
內(nèi)聯(lián)框內(nèi)容區(qū)域的高度
但是，您的瀏覽器的開(kāi)發(fā)人員工具說(shuō)18px。那是因?yàn)槟?code>18px是內(nèi)容區(qū)域的高度。這也是由綠色背景繪制的內(nèi)容區(qū)域（以及填充）。
注意，這些18px可能會(huì)有所不同，因?yàn)镃SS 2.1沒(méi)有指定算法：
內(nèi)容區(qū)域的高度應(yīng)基于字體，但是此規(guī)范未指定如何。UA可以例如使用em-box或字體的最大升序和降序。（后者將確保在em-box上方或下方具有部分內(nèi)容的字形仍位于內(nèi)容區(qū)域內(nèi)，但是導(dǎo)致不同字體的大小不同的框；前者將確保作者可以控制相對(duì)于'line-height'的背景樣式。 ，但會(huì)導(dǎo)致字形在其內(nèi)容區(qū)域之外繪畫(huà)。）
如果UA實(shí)施第一個(gè)建議，則內(nèi)容高度將由font-size決定，該高度決定了em-box。這就是您期望的，綠色框15px很高。
但是，大多數(shù)UA似乎都沒(méi)有這樣做。這意味著高度可能是font-family和中font-size使用的最高字形的高度。
但是使用font-size值15px并不意味著最高的字形也會(huì)15px很高。這取決于字體。這有點(diǎn)類似于normal的初始值line-height，定義為
告訴用戶代理根據(jù)元素的字體將使用的值設(shè)置為“合理”的值。我們建議使用介于
1.0到之間的“正?！敝?code>1.2。
這意味著，如果您使用font-size: 15px，則line-height在15px和之間將是“合理的” 18px。Firefox認(rèn)為“ Verdana”字體是最好的18px。在“ sans-serif”中，它使用17px。
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
#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>
**和線高在塊元素上工作時(shí)，您將線高設(shè)置為200px，元素高度將設(shè)置為200px，內(nèi)部元素的中間高度為200px **
內(nèi)聯(lián)元素?zé)o法讀取高度和填充頂部和底部的填充，我們需要閱讀此屬性，我們必須應(yīng)用任何具有布局屬性（例如float，display：inline-block或block）
如果添加float：left或disply：block css屬性，僅行元素的行高度和填充屬性將在代碼中讀取行高度和填充屬性將起作用
在只添加hasLayout的屬性你的代碼內(nèi)聯(lián)元素工作作為一個(gè)塊級(jí)元素
添加回答
舉報(bào)
0/150
提交
取消