CSS:顶部边距折叠

Question

我需要注意的是，我不是网页设计师，而是技术人员。

我想要应用以下 CSS，但看起来发生了边距折叠:

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

JSfiddle: here .

HTML:

<div class="site-info"> <span class="site-title">© 2016 <a href="#" rel="home"><strong>Non-Web Designer</strong></a></span>
  <div class="menu-footer-menu-container">
    <ul id="menu-footer-menu-2" class="menu">
      <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-71"><a href="/">Home</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="/about/">About</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="/privacy-policy/">Privacy Policy</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="/contact/">Contact Me</a></li>
    </ul>
  </div>
</div>

CSS:

.site-footer {
    margin-top: 0;  
}
.site-footer .site-title::after {
    content: " ";
}
.site-info {
    border-top: 1px #9b998b solid;
    padding: 1px;
}
.site-info .site-title {
    margin-top: 1em;
}
.site-info a {
    color: #686868;
}
#site-navigation .menu-footer-menu-container {
    float: none
}
.menu-footer-menu-container {
    float: right;
    line-height: 1.25;
    padding-top: 3px;
}
.menu-footer-menu-container ul {
    margin: 0;
  padding: 0;
}
.menu-footer-menu-container ul li {
    display: inline-block;
    padding: 1em;
}
footer .menu-footer-menu-container ul li {display: inline-block; padding: 1em;}
.menu-footer-menu-container ul li:hover {background-color: #E7E3D2;}

我向父容器添加了边框和填充(我认为这是边框折叠问题的解决方案:

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

但问题仍然存在。

感谢帮助!

Answer 1

您可以使用padding-top代替margin-top:

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

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

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