dompdf icon indicating copy to clipboard operation
dompdf copied to clipboard

display: inline-block; with margin are rendered different than browser

Open EvEggelen opened this issue 2 years ago • 3 comments

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>

display-block-inline.pdf

EvEggelen avatar Oct 09 '23 09:10 EvEggelen

There appear to be two issues. First is the vertical alignment of the blocks. That should be addressed once the vertical-align branch is finalized. The second issue is that the border around the second block is cut off. I'll need to look into that issue a bit more.

bsweeney avatar Oct 09 '23 15:10 bsweeney

Thanks for the analysis ! During development of a project I ran into issues. Somethings it is hard for me to figure out if my problem is a duplicate or not. Would you consider it helpful is I report these issues with the probability it is a duplicate ?

EvEggelen avatar Oct 10 '23 15:10 EvEggelen

It's still helpful, yes. Sometimes I can find the original issue and link to it. And that way when I release a fix for the issue I can test any samples provided in your issue as well.

And sometimes I can't find the original issue even though I know one exists so I don't mind the duplicates if you can't find an original report. Though, obviously, if you find a relevant issue and have nothing new it's easier to track if you just add a comment to the original.

bsweeney avatar Oct 10 '23 16:10 bsweeney