CSS：页边距顶部折叠

我的警告是，我不是网页设计师，我是技术员

我希望应用以下CSS，但看起来保证金正在缩水：

.site-info .site-title {
    margin-top: 1em;
}

HTML:

我在父容器中添加了边框和填充（我认为这是解决边框折叠问题的方法：

.site-info {
    border-top: 1px #9b998b solid;
    padding: 1px;
}

但问题依然存在

---

感谢帮助！

考虑使用

padding top

属性，除非您对其中一个应用了不同的

背景色，否则它应该适用于您。或者，仅对父元素使用
padding top
。
为元素提供
内联块
。默认情况下
显示：内联
是ap应用于元素。这就是元素不尊重
边距的原因

或者您可以使用
填充

.site-info .site-title {
    margin-top: 1em;
  display: inline-block;
}

如果您将css更改为：

.site-info .site-title{
    display:block;
   .margin-top:1em;
}

“span”是一个“内联”元素，这意味着它不会被你的边距所困扰。你可以改变

<span class="site-title">...

您可以使用
padding top
代替
margin top
：

.site-info .site-title {
    padding-top: 1em;
}

但您还需要将跨度设置为内联块或块元素，以便应用填充：

.site-title {
    display: inline-block;
}

您可以在这个类中尝试“float:left；”。站点信息。站点标题”


。站点页脚{
边际上限：0；
}
.site footer.site title:：after{
内容：“；
}
.网站信息{
边框顶部：1px#9b998b实心；
填充：1px；
}
.网站信息.网站标题{
边缘顶部：1米；
浮动：左；
}
.网站信息a{
颜色：#6868；
}
#站点导航。菜单页脚菜单容器{
浮动：无
}
.菜单页脚菜单容器{
浮动：对；
线高：1.25；
垫面：3件；
}
.菜单页脚菜单容器ul{
保证金：0；
填充：0；
}
.菜单页脚菜单容器ul li{
显示：内联块；
填充：1em；
}
footer.menu footer菜单容器ul li{显示：内联块；填充：1em；}
.menu footer菜单容器ul li:悬停{背景色：#E7E3D2；}
©2016






看看。你可以用padding top来代替（需要跨度为内联块）？这样它将应用于两个元素sexcellent。谢谢@Pete。如果你添加答案，我会选择它。
<div class="site-title">...

.site-title{
    display: block;
    margin-top: 1em;
}

.site-info .site-title {
    padding-top: 1em;
}

.site-title {
    display: inline-block;
}