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属性，除非您对其中一个应用不同的background-color，它应该适合您。或者，只对父母使用padding-top。

Answer 2

将inline-block提供给元素。默认情况下，display: inline已应用于元素。这就是元素不尊重margin。

的原因

或者您可以改为使用padding。

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

请参阅 FIDDLE

Answer 3

“span”是一个“内联”元素，这意味着它不会受到您的保证金的困扰。你可以改变

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

分为：

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

或者设置一个css属性使其行为类似于块元素：

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

Answer 4

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

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

但是你还需要使你的span成为一个内联块或块元素，以便填充适用：

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

Answer 5

您可以在此类“.site-info .site-title”中尝试“float：left;”。

.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;
  float: left;
}
.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;}

<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>

Answer 6

如果您将css更改为：

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

它会起作用

CSS：margin-top崩溃

6 个答案: