防止填充使元素变大？

Question

我有一个 70% 宽度的元素，它漂浮在另一个 30% 宽度的元素旁边。但是，当我添加 25px 填充时，元素会扩展并破坏格式。

有什么方法可以使填充增加内容与元素边缘的距离，而不是使元素更大？

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  float: left;
  width: 30%;
  background-color: lightgreen;
}

.padded {
  padding: 25px; /* Forces box onto next line */
}

<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

<br><br>

<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>

Answer 1

当您使用 border-box 模型时，内边距包含在框大小中。有关详细信息，请参阅此处。

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

Answer 2

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

例如：

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