防止填充增加大小

Prevent padding from increasing size

这是一个示例:

div {
  height: 0;
  overflow: hidden;
  padding: 12px;
  background: tan;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

有没有办法防止 padding 增加 div 的大小?一些线程建议使用 box-sizing: border-box,但在这种情况下似乎不起作用。

如果您想要额外的 space,您可以使用 {margin} 代替,它只会在“”框外添加 space。另外如果你想要文本之间的间距,你可以使用 css 属性 {line-height}.

通过添加额外的 div

将其替换为边距

div.box {
  height: 0;
  overflow: hidden;
  background: tan;
}

div.box div {
  margin: 12px;
}
<div class="box">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

或者考虑使用伪元素进行一些破解:

div.box {
  height: 0;
  overflow: hidden;
  background: tan;
  padding: 0 15px; /* horizontal padding */
}

div.box:before,
div.box:after {
  content: "";
  display: block;
  height: 12px; /* vertical padding */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>