How to remove the space between div content and border?

Question

I have divanother inside div. If I have a border in the outer div, I got space in the Microsoft Edge browser at some scales (100% or 125%). I think this is a rounding error, but I do not 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 a black background visible between the outer and inner div. If you do not see him trying to zoom.

UPDATE: the gap does not really occur between div elements, but inside the inner div, close to its border. Opened it by adding an outline to the inner div.

screenshot example

( )

box-sizing: border-box;
border: 1px solid lime;
outline: 1px solid lime;

Answer 1

1px 300px. 1px

.outer{background-color: black; float: left; border: 1px solid white}
.inner{width: 299px; height: 300px; background-color: yellow}

Microsoft Edge