Html 覆盖边缘塌陷

我有一个带有4个子元素的

div

。每个孩子的底部都有5倍的边距。我似乎无法将较大的

页边距顶部

添加到最后一个子项（或等效地，将较大的

页边距底部

添加到前一个子项）。看看我的

我尝试过在最后一个子容器中添加上边框和上填充，并在没有运气的情况下更改容器的溢出设置。有什么建议吗

#标题{
显示器：flex；
柔性流动：柱；
身高：100%；
框大小：边框框；
溢出：隐藏；
}
#标题div{
填充：0；
保证金：0.5px 0；
}
#简介{
边缘顶部：50px；
}

内容
内容
内容
内容（上页边距不变！）

问题是

选择器

#header div

比选择器

#blurb

更具体

更准确地说，选择器

#header div

的值为

0,1,0,1

，而选择器

#blurb

的值为

0,1,0,0

如果希望选择器覆盖其他样式，则需要增加选择器

#blurb

的特定性

例如：

选择器

#header#blurb

也可以工作

#header #blurb {
    margin-top: 50px;
}

您还可以使用

：last child

或

：last of type

伪类选择最后一个元素：

#header div:last-of-type {
    margin-top: 50px;
}

---

如果要为最后一个子项设置某种样式，请使用选择器：

#标题{
显示器：flex；
柔性流动：柱；
身高：100%；
填充：10%010%；
框大小：边框框；
溢出：隐藏；
}
#标题div{
填充：0；
保证金：0.5px 0；
}
#标题div：最后一个子项{
边缘顶部：50px；
}

内容
内容
内容
内容

#header div:last-of-type {
    margin-top: 50px;
}