html - 响应方 block 填充 100% 行

Question

我创建了 4 个响应式方 block like this .

每个正方形都设置为其父容器宽度的 25%。正方形 (square-box) 的容器 div 没问题，但是 display: table 的内部 div (square-content div) 没有得到小数点到他的宽度。所以如果盒子的宽度是 100.5px，他的容器就是 100px。所以对于 4 个正方形，我少了 2px。

您可以在图像中看到右侧的空白区域。

Answer 1

我可以假设“空白”空间是父元素的边距。

这是您要找的吗？

body, 
.square-box, 
.square-content,
.square-content div,
.square-content span {
    margin: 0 ;
}

.square-box {
    position: relative;
    overflow: hidden;
    background: #4679BD;
    width:100%;
}
.square-box:before {
    content:"";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    width:100%;
}
.square-content div {
    display: table;
    width: 100%;
    height: 100%;
    font-size:40px;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.square-content span:nth-of-type(1) {
   background:red;
}
.square-content span:nth-of-type(3) {
   background:yellow;
    color:black;
}

<div class='square-box'>
    <div class='square-content'>
        <div>
            <span>Box 1</span>
            <span>Box 2</span>
            <span>Box 3</span>
            <span>Box 4</span>
        </div>
    </div>
</div>