爲什麼一個內嵌塊如果沒有內容就對齊到頂部？

我有following simple setup：爲什麼一個內嵌塊如果沒有內容就對齊到頂部？

HTML

<input type=text> 
<a></a> 
<a>text</a> 
<span></span> 
<span>text</span>

CSS

input { 
    width: 50px; 
    height: 25px; 
} 

span, a { 
    display:inline-block; 
    width: 50px; 
    height: 25px; 
    background: green; 
    color: white; 
} 

span { 
     background: blue; 
}

你可以看到，第一錨元件和第一span元素被放置在頂部，而第二錨和跨度對齊在與輸入相同的基線上。爲什麼這樣？

來源

2014-12-04 AngularInDepth.com

沒有內聯子項的內聯塊的基線，包括文本，是它的底部邊緣邊緣（如果沒有底部邊緣，則只是底部邊緣）。然後該基線與文本其餘部分的基線對齊。這在section 10 of the spec的末尾被提及。

來源

2014-12-04 12:21:37 BoltClock

@BoltClock，非常感謝！非常清楚和準確的解釋。有什麼方法可以改變這種邏輯 - _baseline是它的底部邊緣edge_ - 通過應用一些CSS規則？或者基本上只有兩個選項：添加內容或調整兄弟姐妹的基線？ – 2014-12-04 12:29:42

@Maximus：想到的一個奇怪的解決方法是使用'：before'添加非打印字符，如零寬度空格。儘管如此，請參閱http://jsfiddle.net/BoltClock/kauto3n3/4需要測試。 – BoltClock 2014-12-04 12:32:05

@BoltClock，明白了，非常感謝！最好！ – 2014-12-04 12:52:21

什麼都不垂直頂部對齊，只有內容丟失。如果你使用<a> </a>一切都會好起來的 - look here。一個空的內聯標籤沒有基線，所以它的底部邊緣用於對齊。

您有幾種解決方案，以對準空內嵌塊標籤：

添加 （他們會不會是空的了）
作爲BoltClock 建議，在:before
添加一個不可見的字符更改爲垂直對齊：底部

來源

2014-12-04 12:19:08 skobaljic

底部與基線幾乎沒有相同的東西。這實際上取決於元素的高度。 – BoltClock 2014-12-04 12:58:32

請編輯並添加更多解決方案... – skobaljic 2014-12-04 13:03:45

爲什麼一個內嵌塊如果沒有內容就對齊到頂部？

回答

相關問題