Question

代码：

HTML

<body>
    <div class="wrap">
        <div class="box">???</div>
    </div>
</body>

CSS

.wrap {
    background-color: #0000FF;
    display: block;
    height: 600px;
    margin: 0px auto;
    padding: 0px;
    width: 600px;
}

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

JSFiddle：
http://jsfiddle.net/5k0ddtdn/4/

我期待红色边框完全包裹在蓝色父div周围，因为这不是border-box。

为什么不这样做？

Answer 1

像这样更新你的盒子：

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

Live Demo

Answer 2

将box-sizing: border-box;添加到.box。

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

http://jsfiddle.net/5k0ddtdn/8/

在你的代码中，内部元素的宽度为600px + 40px，父元素（.wrap总共有640px）。您需要更改box-model，或将正确的大小设置为内部元素（width: 560px; height: 560px;）。您可以删除内部元素width并仅设置height: 560px;。

http://jsfiddle.net/5k0ddtdn/10/

父div和子div之间的空间？

2 个答案: