4

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

这是一个典型的例子，

首先，用简单的英语：

  • 情况：我们有一个容器div，里面有一个段落元素。

  • 目标：在 div 的内部和段落的外部之间有 12px 的空间。

  • 选项 a) 对容器 div 应用 12px 的填充

  • 选项 b) 对段落元素应用 12px 边距

或者，如果您愿意，可以使用 HTML：

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

并且，CSS：

选项 a)

div#container {padding: 12px;}

选项 b)

p {margin: 12px;}

干杯!

乔恩

4

7 回答 7

4

填充和边距产生相同的效果，除了以下情况（我可能会错过一些）：

  1. 你有某种背景属性。利润不会得到它们。
  2. 你有边界
  3. 您使用 TD（无边距）
  4. 两个嵌套项目，边距折叠在一起，填充没有。
  5. （需要检查这一点）它们可能会以不同的方式影响元素的宽度和高度。（如果有人知道更好，请编辑此）。
于 2009-09-14T04:01:23.690 回答
3

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

于 2009-09-14T03:14:48.313 回答
3

这是 css 中的一个错误，以下是示例：

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

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

示例中的红色和绿色 div 标签是由 css 属性 TOP 创建的，但它有其自身的缺点，即 TOP、BOTTOM 等仅在 div 标签的位置是绝对和相对而不是静态时起作用

于 2011-12-01T14:49:39.750 回答
2

这取决于您要在视觉上完成什么。container是否会有其他子元素可能悬在段落两侧的排水沟中？如果是这样，边距更有意义。但是，如果container应该为所有元素设置一个 12 像素的间距，那么使用填充以避免将边距应用于多个元素集是最有意义的。

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

于 2009-09-14T03:13:59.320 回答
1

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

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

干杯!

于 2009-09-14T03:17:03.447 回答
0

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

于 2009-09-14T03:13:36.507 回答
0

不同之处在于边界所在的位置。

边框位于边距和填充中间的 SMACK DAB。如果您指定边距，那就是边界外的空白。

如果您指定填充，即边框内的空白（将边框从元素中推得更远）

由于 css 剥离，无法在此处显示，但试试这个：

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px;border:solid 2px black;">
  我有边距、填充和边框。
</p>

<p style="background-color: #aee; margin: 40px; padding: 0;border:solid 2px black;">
  我有边距和边框。
</p>

<p style="background-color: #aee; margin: 0; padding: 40px;border:solid 2px black;">
  我有填充和边框。
</p>
</正文>

其他的东西！

  • padding 引入元素的背景色，margin 基本是透明的

  • 某些元素（例如 td ）似乎忽略了边距，而它们会响应填充的变化

于 2009-09-14T03:16:05.220 回答