How to remove space between div content and border?

Question

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;

Answer 1

the border 1px is adding to the width 300px. you need to remove 1px from the width

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

Here is the screenshot from Microsoft Edge