Extra margins when using inline-block and margin-top #1946
Open
Description
The combination of display: inline-block; and margin-top will mess up the margin of the containing element and each contained element after the first one. That makes it very difficult to have a proper alignment and margin.
In my real use-case there is no container, so I cannot apply a padding on the container to workaround this issue. Also vertical-align: top; on any elements does not allow to workaround the issue either.
Reproducible example
See the code below:
<?php
use Dompdf\Dompdf;
require_once '../vendor/autoload.php';
$html = <<<STRING
<!doctype html>
<html lang="en">
<head>
<title>My title</title>
<style>
.container {
background: pink;
}
.foo {
background: gold;
width: 30%;
}
.bar {
background: lightgreen;
width: 70%;
}
.foo, .bar {
display: inline-block;
height: 50px;
margin-top: 200px;
}
</style>
</head>
<body>
<p>lorem lipsum</p>
<div class="container">
<div class="foo">foo foo foo</div><div class="bar">bar bar bar</div>
</div>
</body>
</html>
STRING;
$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4');
$dompdf->render();
// Comment out to see HTML
$dompdf->stream('test.pdf', ['Attachment' => false]);
echo $html;Expected
HTML as rendered by Chrome:
Actual
PDF as rendered by dompdf/dompdf v0.8.3 will show extra margins in different places:
Versions
- dompdf/dompdf v0.8.3, also failing on develop branch 5c20bb4
- PHP 7.2.19, also failing on PHP 7.3 according to eclecticgeek.com/dompdf