0
402
ViewsHow to fully fill child div in div with borders in Chrome?
I have a problem. I need to fill image in div with borders, but in Chrome 96.0 i see some inside margins from top and left, and don't know how to delete them.
This is my code:
.wrapper {
width: 36px;
height: 36px;
border: solid 2px red;
padding: 0;
}
.img {
width: 100%;
height: 100%;
background: green;
margin: 0;
}<div class="wrapper">
<div class="img"></div>
</div>What I see:
What my friend sees in Safari:
·
Juan Pablo Isaza
1 answers
Answer question0
I think it is rounding related issue: https://johnresig.com/blog/sub-pixel-problems-in-css/
It becomes clear when you change zooms levels.
As workaround we can set inset shadow on wrapper:
.wrapper {
width: 36px;
height: 36px;
border: solid 2px red;
padding: 0;
}
.img {
width: 100%;
height: 100%;
background: green;
margin: 0;
}
.shadow{
/* add inset shadow to cover white gaps*/
box-shadow: 0px 0px 2px 1px red inset;
}Normal output:
<div class="wrapper">
<div class="img"></div>
</div>
<br>
With inset shadow:
<div class="wrapper shadow">
<div class="img"></div>
</div>
·
Juan Pablo Isaza
Report
Answer question