無法在此內聯元素中看到邊框頂部

如果我刪除邊框或將顯示更改爲內嵌塊或內嵌塊，則內聯元素將完美顯示。我不明白爲什麼我看不到邊界。無法在此內聯元素中看到邊框頂部

enter image description here

HTML：

<div class="content">test test test</div>

CSS：

body{ 
    padding: 0; 
    margin: 0; 
} 
.content { 
    display: inline; 
    background: palegreen; 
    border: 5px solid red; 
}

http://jsfiddle.net/Kodam/h1c3r5u3/

來源

2014-10-10 Doc Kodam

問題是......？ – Cheery 2014-10-10 22:31:09

可能重複[爲什麼這個內聯元素的頂部邊框不顯示，爲什麼使用float更正此問題？]（http://stackoverflow.com/questions/9195737/why-is-the-top-border-of- this-inline-element-not-displayed-and-why-does-using-f） – BenM 2014-10-10 22:33:19

@BenM感謝您分享鏈接。我想補充一點，未替換的'inline'元素的計算'width' /'height'是'auto'，這意味着計算出的高度是相對於線框本身的高度而言的，這可以通過改變'線height'。 – 2014-10-10 22:38:21

讓我引用this answer：

顯示：內聯意味着該元件被內置顯示，在同一行上的當前塊的內部。只有當它位於兩個塊之間時，該元素形成一個「匿名塊」，然而它具有儘可能小的寬度。

但如果頂部邊框將被考慮在內，它會使你的div垂直對齊與同一線路上的其他元素，即使你的情況，只有上線的單個元素。然而，上邊界被忽略，因此它是「伸出」身體，你看不到它。

作爲「證據」，試圖修改HTML代碼中所提供的提琴：

<div style="line-height: 50px"><div class="content">test test test</div></div>

然後你就可以看到頂部邊框，父元素的高度，有足夠的空間因爲它不會突出。

來源

2014-10-10 22:34:48

這很有道理，thx。 – 2014-10-10 23:06:56

爲什麼不使用display: inline-block？

.content { 
    display: inline-block; 
    background: palegreen; 
    border: 5px solid red; 
}

來源

2014-10-10 22:30:35

無法在此內聯元素中看到邊框頂部

回答

相關問題