Search code examples
phphtmlcssdompdf

Using inline-block adds space below the elements in dompdf

When there are two or more elements with display:inline-block, those elements appear to have a margin below after being rendered as a 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>

multiple inline-block elements

But when there is only one, it display fine:

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

single inline-block element

Already tried using clear:both on a sibling element and as a wrapper of the inline-block elements, but that only caused it to go below the green div

Also already tried using float:left, just like its parent, but using it caused the elements to just overlap

Is/are there any other way to make the children of a floated element to align horizontally?

Solution

  • As mentioned in the comment, inline-block has a default style of vertical-align: baseline which can lead to positioning issues. Add vertical-align: top or vertical-align: bottom to all your inline-blocks to fix this.