CSS 包括宽度和高度的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14416651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Including margin for width and height
提问by sawa
I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100%including everything up to the margin.
我希望框的宽度和高度默认包含所有内容、填充、边框宽度和边距。有没有办法做到这一点？特别是，我希望能够指定一些内容，例如width: 100%将所有内容都包括在内。
回答by ExcellentSP
This is a vague question, but I'll answer the best I can.
这是一个模糊的问题，但我会尽我所能回答。
Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.
边距，顾名思义，就是盒子外面的区域；这意味着无法在 div 中包含边距。
If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding andthe border, use: box-sizing:border-box;
如果你想在你的盒子里面有更多的填充，但你不想调整盒子的大小，那么使用：box-sizing:content-box;
或者如果你想包括填充和边框，使用：box-sizing:border-box;
A workable solution that preserves the size of your divs and removes overflow would look something like this:
保留 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>
Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.
只需将您想要提供边距的 div 放在另一个具有填充的 div 内。从而造成虚假边距。
回答by Sawyer
if your margin is for example 10pxyou can use
如果您的边距是例如10px，您可以使用
width: calc(100% - 20px);
box-sizing: border-box;
回答by ryanve
Set the CSS box-sizingproperty to border-boxto make widthand heightinclude the content, border, and padding. This allows you to set width: 100%and still add paddingor border. In other words box-sizing: border-boxmakes widthinclude everything between the inner edges of the margin. There is no way to include the margin itself in such a way.
将 CSSbox-sizing属性设置border-box为制作width并height包含内容、边框和内边距。这允许您设置width: 100%并仍然添加padding或border。换句话说box-sizing: border-box，width包括边距内边缘之间的所有内容。没有办法以这种方式包含边距本身。
.example { box-sizing: border-box; width: 100%; padding: 10px }
Useful references
有用的参考
回答by yuchien
Maybe wrap another div around it and specified that div's width?
也许在它周围包裹另一个 div 并指定该 div 的宽度？
<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>
<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
inner width's 100px including it's margin.
</div>
</div>回答by Omid
Use display: flex;for the parent tag.
使用display: flex;父标签。
For example:
例如：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
box-sizing: border-box;
display: flex; /* it can put children in one line */
}
.left {
border: 1px solid black;
width: 20%;
float: left;
box-sizing: border-box
}
.right {
border: 1px solid black;
width: 80%;
margin: 0 10px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>