我们将CSS边距放在哪里？
当我们想在HTML元素之间添加空格(使用CSS)时，应将其添加到哪个元素？
我经常遇到以下情况：
<body> <h1>This is the heading</h1> <p>This is a paragraph</p> <h1>Here's another heading</h1> <div>This is a footer</div> </body>
现在，假设我要在这些元素中的每一个之间留出1em的空间，但不要在第一个h1之上或者最后一个div之下。我将其添加到哪些元素上？
显然，这之间没有真正的技术区别：
h1, p { margin-bottom: 1em; }
...还有这个...
div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }
我感兴趣的是次要因素：
- 一致性
- 适用于所有情况
- 轻松/简单
- 轻松进行更改
例如：在这种特定情况下，我会说第一种解决方案要比第二种更好，因为它更简单；我们只在单个属性定义中的两个元素上添加了一个空白边距。但是，我正在寻找更通用的解决方案。每次我做CSS工作时，都会感到有一个很好的经验法则可以应用……但是我不确定这是什么。有人有很好的论据吗？
解决方案
当我希望元素的下一个元素之前有空格时，我倾向于在元素上使用底边距，然后在CSS中使用" .last"类从最后一个元素中删除边距。
<body> <h1>This is the heading</h1> <p>This is a paragraph</p> <h1>Here's another heading</h1> <div class="last">This is a footer</div> </body>
div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }
但是在示例中，这可能不适用，因为页脚div最有可能具有自己的类和特定的样式。
当我一个接一个地拥有几个相同的元素时(段落和其他)，我仍然使用" .last"方法。
当然，我从" Elements" CSS框架中挑选了该技术。
我倾向于同意观点，第一种选择更好。通常这是我喜欢做的。但是，有一个论点是，我们应该为这些元素中的每个元素指定一个边距，如果我们不想应用该边距，则将其清零，因为浏览器对边距的处理方式有所不同。如果未指定<p>(我也认为是<h1>标记)，通常将具有浏览器给出的默认边距。
这将部分地由我们要设计的内容决定，但是例如，在典型的博客索引中，这些内容存在某种粗略的层次结构：
- 我们将在页面上有一个页脚。
- 我们将在每个条目中只有一个标题。
- 每个条目将有n个段落。
知道段落有时会顺序出现，请为段落建立空白-我们需要担心它们看起来像一个系列。从那里，调整标题以处理条目之间的边界。最后，调整页脚/主体的间距，以确保页面底部看起来不错。
这是一个缩略图。最终如何分配填充完全取决于我们自己，但是如果我们从下至上的角度进行操作，则首先调整最常见/最丰富的元素，然后再调整较不常见的元素，可能会发现较少的惊喜。
如果要在元素周围留一些空间，请为其留一个边距。这意味着，在这种情况下，不仅要给<h1>设置一个下边距，还要给<p>设置一个上边距。
请记住，当两个元素垂直相邻并且它们之间没有边框或者填充时，其边距会崩溃。这意味着只有两个边距中较大的一个被认为是它们未加在一起。所以这：
h1, p { margin: 1em; }
<h1>...</h1>
<p>...</p>
...将在标题和段落之间留出1em的空格。
吉姆提出的观点是关键。元素之间的边距崩溃，它们不是可加的。如果要确保在段落和标题的上方和下方有1em的余量，并且在页眉下方和页脚的上方有1em的余量，那么CSS应该反映出来。
给定这个标记(我添加了一个页眉，并将id放在页眉/页脚上)：
<body> <div id="header"></div> <h1>This is the heading</h1> <p>This is a paragraph</p> <h1>Here's another heading</h1> <div id="footer">This is a footer</div> </body>
我们应该使用以下CSS：
#header {
margin-bottom: 1em;
}
#footer {
margin-top: 1em;
}
h1, p {
margin: 1em 0;
}
现在，元素的顺序无关紧要。如果我们使用两个连续的标题，或者以段落而不是标题开头的页面，它将仍然呈现我们想要的方式。
使用高级CSS 2选择器，可能会出现另一种不依赖于last类将布局信息引入HTML的解决方案。
该解决方案使用相邻的选择器。
不幸的是，MSIE 6还不支持它，因此不愿意使用它是可以理解的。
h1 {
margin: 0 0 1em;
}
div, p, p + h1, div + h1 {
margin: 1em 0 0;
}
这样，第一个" h1"就不会有上边距，而紧接在段落或者框之后的任何" h1"都将有上边距。
我是一个相对较新的人，但是我自己的解决方案我认为我们和我都遇到了(更改一个标签的边距可能会解决网站某个部分的间距，而只是打乱了以前其他位置的间距？)现在为所有标签分配相等的页边空白。与H3或者ap相比，我们可能希望在H1上方和下方有更多的空间，但总的来说，我认为页面看起来不错，在任何给定的文本上方和下方均等的空间，因此该解决方案对我来说效果很好，并且满足"简单要求"希望也能遵循经验法则！
