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

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，就像它的父项一样，但是使用它会导致元素重叠

Is/are 还有其他方法可以使浮动元素的子元素水平对齐吗？

Answer 1

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

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

Using inline-block adds space below the elements in dompdf

html

css

php

dompdf