inline-block vs inline似乎不共享相同的基線

我在一行中填充了兩個元素：一個內聯元素，後跟一個內聯塊元素。儘管具有完全相同的垂直對齊：基線，但它們看起來並沒有在線上正確排列。他們是由一個像素在我測試瀏覽器偏移inline-block vs inline似乎不共享相同的基線

減小的測試用例：

<div> 
    <span style="background-color: #f00;">&nbsp;</span> 
    <div style="background-color: #f00; display: inline-block; height: 1em">&nbsp;</div> 
</div>

https://jsfiddle.net/vupn9yk6/

如何使垂直完全對齊兩個元素的任何想法？

來源

2015-09-04 mathieu

跨度不是塊級別的元素。你必須像這樣更新你的css。

HTML

<div class="someclass"> 
<span style="background-color: #f00;">&nbsp;</span> 
<div style="background-color: #000;">&nbsp;</div> 
</div>

CSS

.someclass span, .someclass div{display:inline-block}

檢查這個fiddle。希望這對你有所幫助。

來源

2015-09-04 09:42:11 CodeRomeos

在線內聯元素沒有采取高度和寬度，它的高度和財產汽車，

inline-block的 inline-block的元素正在高度和寬度，如果你沒有定義CSS，當你將改變（inline-block的）物業，然後它來了同一起跑線上

請檢查下面的圖片

來源

2015-09-04 09:59:54

我不能發送給你第二張圖片 –

inline-block vs inline似乎不共享相同的基線

回答

相關問題