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似乎不共享相同的基线

回答

相关问题