Css页边距顶部与页边距底部

如果有一系列块元素，并且希望在它们之间放置边距

---

您喜欢哪一种，页边顶部还是页边底部，还是两者都喜欢？为什么？

我总是使用

页边距底部，这意味着在第一个元素之前没有不必要的空格。
取决于上下文。但是，一般来说，
margintop
更好，因为您可以使用
：first child
删除它。像这样：

div.block {
    margin-top: 10px;
}

div.block:first-child {
    margin-top: 0;
}

这样，边距仅在块之间

显然，这只适用于更现代的浏览器
 @这个垫子-我不同意你的方法。我将以语义的方式在元素上分配间距，并使用上下文选择器定义元素集合的行为

.content p { /* obviously choose a more elegant name */
   margin-bottom: 10px;
}

用类的行为而不是内容来命名类有点像是在走下坡路，会弄乱HTML的语义本质。例如，如果在页面的一个区域中，类为.top10的所有元素突然需要20个像素，该怎么办？您需要创建一个新的类名，并对所有想要影响的元素进行更改，而不是更改单个规则

要回答最初的问题，这完全取决于您希望元素如何堆叠。你想在顶部还是底部留出额外的空间？
是的，我通常也使用边距底部，然后将最后一个类分配给组中的最后一个类。假设你想要一个不同的款式

.discussion .detailed.topics { margin: 20px 0 }    
.discussion .detailed.topics .topic { margin-bottom: 30px }
.discussion .detailed.topics .topic.last { margin-bottom: 0 }

当您使用动态驱动的内容时，这是一种强有力的方法

HTML（Razor视图引擎）


@if（Model.ActiveTopics！=null&&Model.ActiveTopics.Count>0）
{
对于（int i=0；i
另一个选项是将
+
选择器与
页边距顶部组合使用：

.article + .article {
    margin-top: 10px;
}

这将选择后一个元素，这意味着该规则根本不会应用于第一个元素。元素上方或下方没有其他类、伪类或空间

.content p { /* obviously choose a more elegant name */
   margin-bottom: 10px;
}


/*CSS的易读性规则*/
节、条{
轮廓：1px纯蓝色；
}
部分{
背景：浅绿色；
填充：10px；
}
节+节{
边缘顶部：30px；
}
文章{
背景：浅蓝色；
}
/*使用+选择器*/
#plus选择示例文章+文章{
边缘顶部：30px；
}
/*仅使用边距底部*/
#MarginBottom示例文章{
边缘底部：30px；
}
/*使用最后一个孩子*/
#最后一篇示例文章{
/*此元素的其他CSS规则*/
边缘底部：30px；
}
#LastChild示例文章：LastChild{
页边距底部：0；
}
加号选择器仅选择紧跟在另一个元素之后的元素。组合加号选择器和边距顶部意味着顶部没有额外的空间，因为选择器不适用

在一个水平上，他没有一个权杖。羊肚菌，一种生长在羊肚菌中的发酵菌。
根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
潜力悬钩子。酒后驾车。杜伊斯ultricies est viverra，dapibus est quis，pretium sapien。
使用边距底部在底部留下额外的间隙

在一个水平上，他没有一个权杖。羊肚菌，一种生长在羊肚菌中的发酵菌。
根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
潜力悬钩子。酒后驾车。杜伊斯ultricies est viverra，dapibus est quis，pretium sapien。
将边距底部与最后一个子项组合可实现与加号运算符相同的效果

在一个水平上，他没有一个权杖。羊肚菌，一种生长在羊肚菌中的发酵菌。
根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
潜力悬钩子。酒后驾车。杜伊斯ultricies est viverra，dapibus est quis，pretium sapien。
 > > p>我总是把边距放在我认为更可选的元素上。也就是说，添加到更有可能从DOM中删除的元素。例如：

<div class="title">My Awesome Book</div>
<p>Description of My Awesome Book</p>

在这里，我会做相反的事情。我会在图标中添加
页边距底部
。我认为图标只是一个装饰，而且它还有更多的潜力被移除。
这是我的哲学。样式元素是通过潜在的DOM更改来防止CSS更改的方法。
这里投票最多的是有点过时的，因为它说使用
页边距顶部的优势是，您可以使用
：first child
（但从2018年起，您可以将页边距底部与：last child with equality support组合使用）

但是，本文详细解释了选择页边顶部带有：第一个子项的原因（页边底部带有：最后一个子项的instad）

基本上，它表示，如果您在其他类似块之间有一个块，并且您希望该块的边距（顶部和底部）与其他块不同，您将遇到更多的麻烦，因为没有简单的方法来选择继续进行的元素，但使用它可以在不需要帮助类的情况下实现这一点：


使用带有：first child的边距顶部结构，为广告提供适当间距所需的CSS为：

article {
    margin-top: 2em;
}

article:first-child {
    margin-top: 0;
}

//space at the top of the Ad
.ad {
    margin-top: 1em;
}

//and to reduce space below the ad
.ad + article {
    margin-top: 1em;
}

我不太明白为什么你们中的一些人说利润率底部比利润率顶部更符合逻辑

只是为了确保大家都知道：页面是从上到下呈现的

让我们考虑一个简单的问题< /P>
<div class="box">
   <div class="item first"></div>
   <div class="item second"></div>
   <div class="item third"></div>
</div>

或者你可以用

.item + .item {
    margin-top: 16px;
}

正如您所见，只需要一条规则。
只有当存在多个元素时，它才会起作用，这是您所期望的，例如，由于某种原因，“first”和“second”不存在，您不想从顶部获得额外的空间，因为顶部的空间由“box”元素填充处理

如果出于某种原因，一个或多个元素的间距应该与其他元素的间距不同
.item:nth-child(n+2) {
    margin-top: 16px;
}

.item + .item {
    margin-top: 16px;
}

.item + .item {
    margin-top: 16px;
}

.item + .item.second {
    margin-top: 32px;
   // you could use margin-bottom here but there will be needed a different rule for handling if there is no 3rd element
}

.item.second + .item {
    margin-top: 32px;
}

.item {
    margin-bottom: 16px;
}

.item:last-child {
   margin-bottom: 0px;
}