css - 包括宽度和高度的边距

Question

我希望框的宽度和高度默认包含所有内容、填充、边框宽度和边距。有没有办法做到这一点？特别是，我希望能够指定诸如 width: 100% 之类的内容，包括直到边距的所有内容。

Answer 1

这是一个模糊的问题，但我会尽力回答。

边距，顾名思义，就是盒子外面的区域；这意味着无法在您的 div 中包含边距。

如果你想在你的盒子内部有更多的填充，但你不想调整盒子的大小，那么使用:box-sizing:content-box;
或者如果你想包含内边距和边框，使用:box-sizing:border-box;

保留 div 大小并消除溢出的可行解决方案如下所示:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

---

<div id="parent">
   <div id="child"></div>
</div>

只需将您要为其提供边距的 div 放在另一个具有填充的 div 中。从而产生虚假边距。