html - 内联 block 与内联似乎不共享相同的基线

Question

我在一行中填充了两个元素:一个内联元素，后跟一个内联 block 元素。尽管具有完全相同的 vertical-align: 基线，但它们似乎没有正确对齐。它们在我的测试浏览器上偏移了一个像素

简化的测试用例:

<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/

关于如何使两个元素完美垂直对齐的任何想法？

Answer 1

Span 不是 block 级元素。你必须像这样更新你的 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 .希望对您有所帮助。