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

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

```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>

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