填充百分比的CSS白色边框

Question

我得到了这个矩形，周围有一个轮廓，并填充了25个div，其大小为宽度和高度的20％。每个边距和填充为0，它适用于所有其他正方形。我还检查了外部的squara实际上是一个正方形。这是一个子广场风格的例子（它是从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

你已经为class =＆＃34; field middle center＆＃34;添加了元素样式。高度为161.5px。

高度.5px使底部的空白区域。