Html 父div和子div之间的空间？

代码：

HTML

JSFiddle:

考虑到这不是一个

边框框，我希望红色边框完全环绕蓝色父div

.box {box-sizing: border-box;}

为什么不这样做？
更新您的框，如下所示：

.box {
    border: solid 20px #FF0000;
    color: #FFFFFF;
    display: block;
    height: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

添加
框大小：边框框到
框

.box {box-sizing: border-box;}


在代码中，内部元素的边框宽度为600px+40px，父元素（
.wrap
总共有640px）。您需要更改
盒子型号
，或为内部元件设置正确的尺寸（
宽度：560px；高度：560px；
）。您可以删除内部元素的
宽度
，并仅设置
高度：560px

这是因为造成空格的不是
边框框。它当前是
内容框
，这意味着：这是CSS标准指定的默认样式。测量的宽度和高度属性仅包括内容，而不包括填充、边框或边距。欲了解更多信息，请查看有关我的不起作用的原因的任何想法？不错的解决方案，但边界仍然没有像直观上应该的那样在底部环绕“.wrap”。
.box {box-sizing: border-box;}