防止填充使元素变大？答案

【问题标题】：keep padding from making the element bigger?防止填充使元素变大？
【发布时间】：2011-07-07 17:04:35
【问题描述】：

我有一个宽度为 70% 的元素，它浮动在一个宽度为 30% 的元素旁边，但是当我添加填充的 25px 时，它会扩展元素并破坏格式，有什么办法可以使它只是增加内容与边缘的距离，而不是仅仅扩大它？

【问题讨论】：

【解决方案1】：

当您使用border-box 模型时，填充包含在框大小中。详情请见here。

<!DOCTYPE html>
<html>
    <head>
        <title>padding example</title>
        <style type="text/css">
        .seventy {
            display: block;
            float: left;
            width: 70%;
            background-color: red;
        }
        .thirty {
            display: block;
            float: left;
            width: 30%;
            padding: 25px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            background-color: green;
        }
        </style>
    </head>
    <body>
        <div class="seventy">Stuff</div>
        <div class="thirty">More Stuff</div>
    </body>
</html>

【讨论】：

虽然更正了对 box-sizing 的支持有点粗略。考虑从其中一个宽度中抽取一小部分并将其添加到填充中。所以你的 2 个宽度 + 填充 = 100%。编辑~ Zeta Twos 解决方案将保证 25px 的间隙，这将是一个更好的解决方案。

【解决方案2】：

我会在元素内部创建另一个相同类型的元素（我猜它是一个 div 吗？）并将其设置为具有 25 像素的填充/边距。

例如：

<div id="wrapper">
 <div id="width30">
 </div>
 <div id="width70">
  <div id="padding25">
   Acctual content here.
  </div>
  </div>
 </div>
</div>

【讨论】：

这是一个超级聪明的解决方案，人们应该考虑更多。没有粗略的 css hack，没有可能不受支持的浏览器，并且它遵循干净的容器内容模式。很高兴看到一些 KISS CSS（CISS？），因为它很容易过度设计。