display: inline-block; with margin are rendered different than browser
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>
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.
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 ?
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.