I have div
inside another div
. If I have a border in the outer div
I got a space in Microsoft Edge browser in some scales (100% or 125%). I think it's a rounding bug, but I don't know how to get rid of it.
html:
<div class="outer">
<div class="inner"></div>
</div>
css:
.outer {
background-color: black;
float: left;
border: 1px solid white;
}
.inner {
width: 300px;
height: 300px;
background-color: yellow;
}
jsfiddle: https://jsfiddle.net/EvgeniiMalikov/4bbx9p5w/
As you can see there is black background visible between outer and inner div. If you don't see it try to change scale.
UPDATE: the gap really appears not between div elements, it's inside inner div close to its border. Discovered it by adding outline to inner div.
example screenshot
example screenshot with border and outline
(gap between border and outline)
box-sizing: border-box;
border: 1px solid lime;
outline: 1px solid lime;