html - 容器内相邻元素之间的一致间距

Question

我有一个特定高度和宽度的容器，其中包含许多子项 (divs)。我想在每个 div 周围有一个 4px 的浅蓝色边框。两个相邻的 div 之间应该只有 4px 的间距。

我可以通过手动设置高度、宽度和边距/边框来完成此操作，但我是根据父级的百分比来调整子级的大小。

这是我设置的 fiddle ，显示父级中的 div，但没有任何间距或边框。

.container {
    height: 300px;
    width: 300px;
    background-color: lightblue;
}

.left {
    width: 30%;
    height: 100%;
    background-color: lightyellow;
    float: left;
}

.top-right {
    width: 70%;
    height: 50%;
    background-color: lightred;
    float: right;
}

.bottom-middle {
    width: 35%;
    height: 50%;
    background-color: lightpink;
    float: left;
}

.bottom-right {
    width: 35%;
    height: 50%;
    background-color: lightgreen;
    float: right;
}

.border {
    /* margin: 4px; */
}

<div class="container">
    <div class="left border"></div>
    <div class="top-right border"></div>
    <div class="bottom-middle border"></div>
    <div class="bottom-right border"></div>
</div>

http://jsfiddle.net/ymv0oave/

Answer 1

2px border 用于所有 div，2px border 用于容器。

.container {
 ...
  border: 2px solid blue;
}
.container div{
  box-sizing: border-box;
  border: 2px solid blue;
} 

https://jsfiddle.net/afelixj/mja5kfvw/