包括宽度和高度的余量

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内.从而创造了人造利润.

Answer 2

如果您的保证金是10px，则可以使用

width: calc(100% - 20px);
box-sizing: border-box;

浏览器支持

w3schools.com参考

Answer 3

将CSS box-sizing属性设置border-box为make width并height包括内容，边框和填充。这使您可以设置width: 100%并仍然添加padding或border。换句话说，box-sizing: border-boxmake width包含边距内边缘之间的所有内容。无法以这种方式包括边距本身。

.example { box-sizing: border-box; width: 100%; padding: 10px }

有用的参考

• CSS Box模型可视化
• CSS3 UI：box-sizing属性
• * { box-sizing: border-box } FTW