css 防止填充使元素变大？

isr3a4wc 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(142)

我有一个宽度为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>

css

来源：https://stackoverflow.com/questions/5175268/prevent-padding-from-making-an-element-bigger

2条答案

按热度按时间

wmvff8tz1#

当您使用border-box模型时，填充包含在框大小中。有关详细信息，请参阅here。

.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>

赞(0）回复(0）举报 2022-12-24

8hhllhi22#

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

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

赞(0）回复(0）举报 2022-12-24

我来回答

css 防止填充使元素变大？

2条答案

相关问题

热门标签

最新问答