使用 inline-block 在 dompdf 中的元素下方添加空间

Question

当有两个或多个带有 的元素时display:inline-block，这些元素在渲染为 pdf 后似乎在下方有一个边距：

<div style="background-color:pink;">
    <div style="background-color:red;float:left;width:25%;">Hello</div>
    <div style="background-color:orange;float:left;width:25%;">Hello</div>
    <div style="background-color:yellow;float:left;width:25%;">Hello</div>
    <div style="background-color:green;float:left;width:25%;position:relative;">
        <div style="background-color:red;display:inline-block;width:25%;">Hello</div><!--
        --><div style="background-color:orange;display:inline-block;width:25%;">Hello</div>
    </div>
</div>

但当只有一个时，它显示正常：

<div style="background-color:pink;">
    <div style="background-color:red;float:left;width:25%;">Hello</div>
    <div style="background-color:orange;float:left;width:25%;">Hello</div>
    <div style="background-color:yellow;float:left;width:25%;">Hello</div>
    <div style="background-color:green;float:left;width:25%;position:relative;">
        <div style="background-color:red;display:inline-block;width:25%;">Hello</div>
    </div>
</div>

已经尝试clear:both在同级元素上使用并作为inline-block元素的包装器，但这只会导致它低于绿色 div

也已经尝试过使用float:left，就像它的父级一样，但是使用它会导致元素重叠

是否有其他方法可以使浮动元素的子元素水平对齐？

Answer 1

正如评论中提到的，inline-block默认样式vertical-align: baseline可能会导致定位问题。将vertical-align: top或添加vertical-align: bottom到您的所有内容中inline-blocks以解决此问题。