百分比填充矩形中的 CSS 白色边框

Question

我得到了这个矩形，它被一个轮廓包围，并填充了 25 个 div，它们的大小分别为宽度和高度的 20%。每个边距和填充都是 0，它适用于所有其他方块。我还检查了外部正方形实际上是一个正方形。这是一个子正方形样式的示例（它是从 chrome 工具箱中复制的）：

element.style {
    left: 60%;
    top: 80%;
    width: 20%;
    height: 20%;
    float: left;
}

怎么会在底部还有一个空白？会不会是因为浮点数计算不准确？

有人遇到过这个问题吗？

Answer 1

这是因为浏览器的舍入机制。您不打算使用浮点数像素（您将如何显示小于最小显示器显示单元的内容？），并且当使用百分比时，这将自动发生，并且布局可能会在不同的像素上改变一两个像素缩放级别、窗口大小等...

想象你的盒子是 101 像素宽/高。其中 20% 是 20.2 像素，浏览器将以 20 像素呈现。最后，您将在每行和每列中有 5 个这样的正方形：

20 + 20 + 20 + 20 + 20 = ?

绝对不是 101，这就是造成空白的原因。

百分比是好的并且有其目的，但不是为了你正在做的事情，至少不是没有一点控制权。

最快的解决方法是修改您的调整大小处理程序，以 5 像素的步长调整整个网格的大小，因为这样每个单独的方格都是一个整数（一个整数），一切都会按照您的计划进行。

Answer 2

试试看：

<div class="x">
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>

    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>

    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>

    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>

    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
</div>

用这个：

* {
    box-sizing: border-box;
}
.x {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
}

.y {
    width: 20%;
    height: 20%;
    float: left;
    border: 1px solid black;
}

你必须拥有它：

this is pic of up code.

Answer 3

你已经为高度为 161.5px 的 class="field middle center" 添加了元素样式。

0.5px 的高度构成了底部的空白。