对父盒子设置边框后，会与子盒子之间有空隙该怎么解决？

Question

对父盒子设置边框后，会与子盒子之间有空隙（上面和左边）这是为什么，该如何解决？
代码：

 
```css
*{
            margin: 0;
            padding: 0;
}
        .box{
            width: 300px;
            height: 200px;
            border: 5px solid sienna;
            margin: 50px;
            font-size: 0;
}
        .box .box1{
            width: 100%;
            height: 100%;
            background-color: red;
            position: relative;
}
 

 
```html
  <div class="box">
        <div class="box1"></div>
    </div>

Answer 1

这个是边框太大导致的，适当调小，或者给box1加个外边距0： margin:0

Answer 2

我试了一下，好像不行

Answer 3

什么浏览器？我这里chrome，firefox，edge，设置ie11都没你截图的白色内边

Answer 4

的确没有你说的这个问题，这个是浏览器展示边框效果的一种体现，我觉得可以忽略