display: inline-block; with margin are rendered different than browser
Open
Nobody has claimed this yet.
bug
layout
- Dominant language
- PHP
- Stars
- 11.2k
- Forks
- 1.8k
- PR merge metrics
- No merged PRs in 30d
Description
The code below renders different than in a browser. It looks like the top margin is not applied when 2 blocks are rendered. I quickly looked and could not find a duplicate in the issue database.
https://jsfiddle.net/754vbhdy/
<!DOCTYPE html>
<html>
<head>
<style>
@page {
width: 210mm;
height: 297mm;
padding: 0;
margin: 0;
overflow: visible;
}
.page {
break-before: page;
width: 198mm;
height: 287mm;
padding-top: 0mm;
padding-left: 10mm;
padding-bottom: 0mm;
padding-right:0mm;
margin: 0mm;
overflow: visible;
border: 1mm solid #4CAF50;
}
.section {
padding: 0;
margin: 0;
border: 2px solid #4CAF50;
background-color: red;
overflow: visible;
display: inline-block;
}
.section.nextphase {
width: 50mm;
height: 50mm;
margin-right:0mm;
margin-left:0mm;
margin-top:7mm;
}
.square {
background-color: #E5F5F5;
width:100%;
height: 100%;
border-radius: 3.5mm;
}
</style>
<title>Last page</title>
</head>
<body>
<div class="page">
<!--<div style=" margin:10mm;" >-->
<div class="section nextphase">
<div class="square" >
</div>
</div>
<div class="section nextphase">
<div class="square" >
</div>
<!--</div>-->
</div>
</div>
</body>
</html>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the HTML/CSS reproduction in the issue and compare the jsfiddle result, browser rendering, and attached display-block-inline.pdf. Trace how dompdf lays out the two inline-block sections and their top margins. Done means the generated PDF applies the margin consistently with the browser output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, php
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100