Question

我完全理解盒子模型。这个问题更多的是关于尝试确定何时使用边距以及何时使用填充的语义方法。

这是一个典型的例子，

首先，用简单的英语：

情况：我们有一个容器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

填充和边距会产生相同的效果，除非在以下情况下（我可能会遗漏一些）：

您有某种背景属性。利润不会得到它们。
你有一个边框
您使用TD（无边距）
两个嵌套项目，边距折叠在一起，填充不在。
（需要检查一下）它们可能会以不同方式影响元素的宽度和高度。（如果有人知道更好，请编辑此内容）。

Answer 2

就个人而言，我更喜欢选项A.为什么？现在说我必须在div中添加其他HTML元素，并且我希望维护填充，我不必为我的CSS文件添加其他规则以使其正常工作。

Answer 3

这是css中的一个错误，这里有例子：

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

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

示例中的红色和绿色div标签是由css属性TOP创建的，但它有自己的缺点，TOP，BOTTOM等只有当div标签的位置是绝对和相对的，但不是静态时才有效

Answer 4

这取决于你想要在视觉上完成什么。 container会有其他子元素可能会挂在段落两侧的装订线上吗？如果是这样，保证金更有意义。但是如果container对于所有元素，句点应该有一个12像素的装订线，那么使用填充最有意义的是避免将边距应用于多个元素集。

一般来说，您总是希望段落具有垂直边距以确保一致的段落前导。

Answer 5

就个人而言，我会选择#container {padding: 12px;}的选项a，因为它清楚地表明所有子元素必须与此div的边界保持12px的距离。

如果我希望其他元素与#container的边框保持12px以上的距离，那么我会对该元素应用更多的边距。

干杯！

Answer 6

分区上的垂直填充 - 因为如果我决定在多个段落之间需要不同数量的垂直空间，我会使用底部边距，并且封闭分区的顶部/底部填充几乎总是保持完整你只需要静态定位元素。

Answer 7

区别在于边界所在。

边框位于边距和填充中间的SMACK DAB。如果指定边距，则表示边框外的空白区域。

如果指定填充，那就是边框内的空白区域（将边框从元素中推出更远）

由于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>

其他东西！

填充带来元素的背景颜色，边距基本上是透明的
某些元素（如td）似乎忽略了边距，而它们会响应填充中的更改

CSS，嵌套div和＆amp;边距与填充

7 个答案: