CSS：margin-top collapsing

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

但你也需要讓你的跨度直列塊或塊元素，以便填充適用：

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

Answer 2

考慮使用padding-top屬性，除非您對其中一個應用不同的background-color，它應該適合您。或者僅對父母使用padding-top。

Answer 3

給元素賦予inline-block。默認情況下，display: inline已應用於元素。這就是爲什麼該元素不尊重margin。

或者您也可以使用padding。

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

看到這個FIDDLE

Answer 4

，如果你改變你的CSS：

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

，將工作

Answer 5

「跨度」 是 「內聯」 元素，這意味着它不會受到您的保證金的困擾。您可以更改

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

分爲：

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

或設置CSS屬性，使其像一個塊級元素：

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

Answer 6

你可以試試「浮動：左; 「在這個類」.site-info .site-title「中。

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