Html 保持填充不会使元素变大？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5175268/
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
keep padding from making the element bigger?
提问by nkcmr
I have an element with a 70% width, and it is floating beside an element with 30% width, but when I add 25pxof padding it expands the element and breaks the format, is there any way to make it just increase the contents distance from the edge as opposed to just making it bigger?
我有一个宽度为 70% 的元素，它漂浮在一个宽度为 30% 的元素旁边，但是当我添加25px填充时，它扩展了元素并破坏了格式，有没有办法让它只增加内容的距离边缘而不是让它变大？
回答by codelark
When you use the border-boxmodel, the padding is included in the box size. See herefor details.
使用border-box模型时，填充包含在框大小中。有关详细信息，请参见此处。
<!DOCTYPE html>
<html>
<head>
<title>padding example</title>
<style type="text/css">
.seventy {
display: block;
float: left;
width: 70%;
background-color: red;
}
.thirty {
display: block;
float: left;
width: 30%;
padding: 25px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: green;
}
</style>
</head>
<body>
<div class="seventy">Stuff</div>
<div class="thirty">More Stuff</div>
</body>
</html>
回答by Zeta Two
I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.
我会在元素内创建另一个相同类型的元素（我猜它是一个 div 吗？）并将该元素设置为具有 25px 的填充/边距。
For example:
例如：
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>
