CSS，嵌套的div＆边距与填充(CSS, nested divs & margins vs. pa

我完全理解盒模型。这个问题更多的是试图牵制关于何时使用利润率语义方法以及何时使用填充。

这里是一个典型的例子，

首先，用简单的英语：

情况：我们有一个div容器，它的内部有一个段落元素。
目标：有div的内部和段落的外侧之间的12px的空间。
选项A）应用填充的12px的给div容器
选项B）适用12px的利润率段落元素

或者，如果你愿意，HTML：

<div id="container">
    <p>Hello World!</p>
</div>

并且，CSS：

选项A）

div#container {padding: 12px;}

选项B）

p {margin: 12px;}

干杯!

乔恩

Answer 1:

就个人而言，我更喜欢选项A.为什么？现在说我要其他HTML元素添加到DIV，我想保持填充，我不会有其他规则添加到我的CSS文件得到它的工作。

Answer 2:

填充和利润得到相同的效果，除在下列情况下，（我可能会错过一些）：

你有某种背景属性。利润率不会得到他们。
你有一个边界
您可以使用TD（无边框）
两个嵌套项目，边距收拢在一起，其中垫衬不是。
（需要检查此一）他们可能影响元素的宽度和高度不同。（如果有的人更知道，请编辑此）。

Answer 3:

这是在CSS中，这里有一个例子错误：

http://creexe.zxq.net/div-issue-padding.html =填充问题

http://creexe.zxq.net/div-issue-margin.html =保证金问题

例子中的红色和绿色div标签是由CSS属性之上创建的，但它有自己的缺点athat顶部，底部等工作，只有当div标签的位置是绝对的，相对的，而不是静态的

Answer 4:

这取决于你想在视觉上完成的。将container有可能挂在进水沟上段的两侧其他子元素？如果是的话，保证金更有意义。但是，如果container应具有所有元素，周期的12像素天沟，它最有意义使用填充以避免必须边距应用到多个元件组。

一般来说，你总是希望段落有垂直边距，以确保一致的段落领先。

Answer 5:

就个人而言，我会选择用走的#container {padding: 12px;}因为它使充分明确指出，所有子元素必须远离这个div的边框12px的路程。

如果我想其他元素保持12个像素更多地从远#container的边界，然后我申请成为更保证金到该元素。

干杯!

Answer 6:

上师垂直填充 - 因为如果我决定要在多个段落我会使用底边距之间的不同量的垂直空间，以及封闭师的顶部/底部填充几乎会一直保持不变假设你只是有staticly内部定位的元素。

Answer 7:

所不同的是这里的边界坐镇。

边框位于嫌民建联在边距和填充的中间。如果指定的利润，也就是白色空间的外部边界。

如果指定填充，即白色空间内的边界（从元件进一步推动了边境）

你不能在这里显示，由于CSS剥离，但尝试了这一点：


<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

其他的东西！