Html 如何正确使用 div 中的填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11805011/
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
How to use padding in div correctly?
提问by blsn
I'm trying to use padding in a div and which is wrapped by another div (‘container'), apologize for this simple question, but I couldn't find an answer.
我正在尝试在一个 div 中使用填充，它被另一个 div（“容器”）包裹，为这个简单的问题道歉，但我找不到答案。
As long as I don't use padding:10px;the structure of the page is stable.
i.e. the right div is floating to the left (‘content' is aside ‘sidebar').
只要我不使用padding:10px;页面的结构就是稳定的。即右侧的 div 向左浮动（“内容”在“侧边栏”旁边）。
<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
background-color: RED;
height: 200px;}
.sidebar {
background-color: GREEN;
width: 30%;
float: left;}
.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<p>text in sidebar</p>
</div>
<div class="content">
<p>text in content</p>
</div>
</div>
</body>
</html>
When using padding:10px;the right div (‘content') goes down under ‘sidebar' instead floating to the side of ‘sidebar'.
当使用padding:10px;正确的 div（“内容”）时，它会在“侧边栏”下方而不是浮动到“侧边栏”的一侧。
I've tried clear: left;(right, both) but it doesn't help me.
我已经尝试过clear: left;（对，两者都尝试过）但它对我没有帮助。
Any solution for the above and which is not particular style to <p>,would be appreciated.
任何针对上述问题且不是特定风格的解决方案<p>，将不胜感激。
回答by Cypress Frankenfeld
In order to avoid going over 100% of the page width and bumping .contentdown, you may have to make some compromises. I can think of a few solutions:
为了避免超过 100% 的页面宽度并向下颠簸.content，您可能需要做出一些妥协。我可以想到几个解决方案：
1) Pad all direct children of .content
1) 填充所有的直接子代 .content
.content > * {
padding-left:10px;
}
?
?
2) Pad .contentusing percentage
2).content使用百分比填充
.content {
padding-left:2%;
width:68%;
}
3) Change the behavior of the box model
3）改变盒子模型的行为
.content {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
All three of these solutions incur some badthings.
所有这三种解决方案都会导致一些不好的事情。
- Padding all the direct children of
.contentcould cause problems down the line when you want to give an element padding other than 10px. - Padding
.contentusing percentage will look slightly different on different sized windows. - Changing the behavior of the box model can be bad if you don't know what you are doing because it alters the default, standard CSS model to one that is not widely used (in this example, we're basically telling modern browsers to use IEs quirksmode box model), but it seems like the best solution for your case. There are basically no issues with it, other than lack of support in IE7, which only has around 2% of browser market share.
.content当你想要给一个元素填充不是 10px 时，填充所有的直接子元素可能会导致问题。.content使用百分比填充在不同大小的窗口上看起来略有不同。- 如果您不知道自己在做什么，则更改盒模型的行为可能会很糟糕，因为它会将默认的标准 CSS 模型更改为未广泛使用的模型（在此示例中，我们基本上是在告诉现代浏览器使用IEs quirksmode box model），但它似乎是您案例的最佳解决方案。除了在浏览器市场份额只有 2% 左右的 IE7 中缺乏支持外，它基本上没有问题。
回答by Lars Knickrehm
That behaviour is totally correct. Please remember the so-called box model (in short):
这种行为是完全正确的。请记住所谓的盒子模型（简称）：
margin, border and padding will all be added to the width value
边距、边框和填充都将添加到宽度值中
In this case you have to calculate
在这种情况下，您必须计算
30% + 10px + 70% + 10px = 100% + 20px
Browsers start supporting the css property box-sizing(see https://developer.mozilla.org/en-US/docs/CSS/box-sizingfor more information). You can set it to border-boxin order to change the default box model.
浏览器开始支持 css 属性box-sizing（有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/CSS/box-sizing）。您可以将其设置border-box为以更改默认框模型。
But remember to use those browser suffixes, too:
但请记住也要使用这些浏览器后缀：
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
回答by Alexander Wigmore
This is a common problem, with typical web design not behaving the way our common logic would expect.
这是一个常见的问题，典型的网页设计不符合我们的共同逻辑所期望的方式。
What is happening is the padding is actually making the .contentdiv become wider than its allocated slot, thus forcing it down underneath.
发生的事情是填充实际上使.contentdiv 变得比其分配的插槽更宽，从而迫使它在下面。
There's a few ways around this.
有几种方法可以解决这个问题。
This rule: box-sizing:border-box;makes it so that if you set width:100pxand padding:10px;, the browser automatically makes the whole DIV 100px no matter what.
这条规则：box-sizing:border-box;如果你设置了width:100px和padding:10px;，不管怎样，浏览器都会自动使整个 DIV 变成 100px。
What in effect is happening is the DIV is becoming 80px wide, with 10px padding either side.
实际上发生的是 DIV 的宽度变成 80 像素，两边填充 10 像素。
I've created a jsfiddle
我创建了一个jsfiddle
The browser support for this rule is generally very good, although make sure to include all the rules I've added in the js (I.e, the one with, -webkit-, -moz-, and the one above which is just box-sizing:border-box;)
浏览器对这条规则的支持通常非常好，尽管确保包含我在 js 中添加的所有规则（即，带有 -webkit-、-moz- 的规则，以及上面的只是box-sizing:border-box;）
For reference, all the rules here:
作为参考，这里的所有规则：
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
