从 box-sizing 中移除 padding 会增加 div 的宽度答案

【问题标题】：Removing padding from box-sizing adds width to div从 box-sizing 中移除 padding 会增加 div 的宽度
【发布时间】：2013-11-27 17:13:49
【问题描述】：

我在一个网格中使用 box-sizing content-box，右边距为 15px。当我将 0 的填充应用于最后一个 div 时，最后一个 div 的宽度增加了 15px，而行中的其他 div 则失去了 15px 的相等份额。

有没有办法解决这个问题？

<div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter last">
    <h5>One Quarter</h5>
    </div>
</div>

.col {
    width: 100%;
    float: left;

    border-right: 15px solid transparent;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.one_quarter { 
    width: 25%;
}

.col.last{
border-right-width: 0;
}

【问题讨论】：

标签： css grid padding

【解决方案1】：

当您制作网格时，您必须考虑填充，否则您会得到一些愚蠢的结果。

类也需要重新分配。（.col 和 .one_quarter 在相同的元素上。所以你的 100% 宽度和 25% 宽度相互覆盖）

Here's an Example Fiddle of what I did.

考虑到这一点，我已经更新了您的 HTML 和 CSS：

HTML：

<div class="col">
    <div class="one_quarter marginRight">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginCenter">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginCenter">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginLeft">
    <h5>One Quarter</h5>
    </div>
</div>

CSS：

.col {
    width: 100%;
}

.one_quarter { 
    width: 23%;
    float: left;
    border:1px dotted red;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.col.last{
border-right-width: 0;
}

.marginCenter{margin-right:1%;margin-left:1%;}
.marginLeft{margin-left:2%;}
.marginRight{margin-right:2%;}

【讨论】：

这是一个更大的网格的一部分，因此 .col 类用于其他列。我还应该说我正在创建一个带有固定排水沟的流体网格，你建议使用 px 吗？
它可以使用像素，只要您的百分比+像素不超过您正在使用的任何容器宽度的 100%。如果您调整此小提琴宽度大小，您可以看到问题。 jsfiddle.net/MathiasaurusRex/aTbGL/2
嗯，我能想到的唯一解决方案是左右填充，然后增加容器宽度，但我将无法嵌套网格。

【解决方案2】：

我强烈建议不要在您的网格元素中放置填充。这可能会导致严重的头痛。

添加另一个 div 并在网格单元格中应用填充，如下所示：

<div class="grid">
   <div class="grid-cell">
      <div class="grid-content">
      </div>
   </div>
</div>

.grid-content {
 padding: 15px;
}

让网格单元进行宽度测量，让网格内容进行填充。

【讨论】：

到目前为止，我在内容方面没有遇到任何问题，但我会记住这一点。