内联块与内联似乎不共享相同的基线

Question

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

缩减的测试用例：

<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不是块级元素。你必须像这样更新你的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。希望这能帮助你。

Answer 2

<强>内联 内联元素不是高度和宽度，它的高度和属性auto，

<强>内联块 内联块元素占用高度和宽度，如果你没有在你的css中定义，当你在（内联块）中更改属性时，它就会出现相同的基线

请查看以下图片