元素與邊距之間的垂直間隙0

我知道這個問題有been asked之前，但我不明白如何與元素margin:0有他們的邊緣'崩潰' - 他們有他們的邊緣'擴展'給我（。這兩個元素之間的15px垂直間隙 - <header> & <nav>元素與邊距之間的垂直間隙0

這裏是我使用的HTML代碼：

<div id="container"> 
    <header> 
     <div class="logo">...</div> 
    </header> 
    <nav> 
     ... 
    </nav> 
</div>

和CSS樣式：

#container { 
    width: 1178px; 
    margin: 0 auto; 
    background-color: #FFF; 
} 
header { 
    height: 102px; 
    background-color: #000; 
    background-image: url(images/header-bg.jpg); 
    margin: 0; 
} 
nav { 
    height: 51px; 
    background-image: url(images/navigation-bg.jpg); 
    background-repeat: repeat-x; 
    margin: 0; 
} 
.logo { 
    width: 268px; 
    height: 69px; 
    padding: 22px 0 0 31px; 
    margin: 0; 
    float: left; 
}

jsfiddle這裏。

來源

2016-03-03 Steve

15px之間的差距？我無法從您當前的代碼中獲得。您可能會有22px的空白，因爲您已將徽標應用於徽標。 –

你可以製作jsfiddle或plnkr嗎？ – martin

您是否想了解保證金摺疊規則？然後[this]（http://stackoverflow.com/questions/35337043/when-i-try-to-shift-the-image-upwards-using-negative-margin-the-whole-container/35337103#35337103）將幫助你更好。 –

您必須爲<ul>元素設置margin: 0;。

默認情況下，瀏覽器將margin-top和margin-bottom設置爲15px。

#menu-primary-menu { 
    list-style-type: none; 
    margin: 0; 
}

您可以在圖片中看到波紋管的<ul>元素有margin-top: 15px即使你沒有自己設置它。

順便說一句，如果你想保持這種margin-bottom: 15px然後將其設置在<nav>元素上不<ul>，因爲它裏面<nav>。 https://jsfiddle.net/cq0LwL8f/1/

來源

2016-03-03 07:41:53 martin

謝謝@Martin。你是說如果我只設置'margin-bottom：15px'，'margin-top：'也設置爲'15px'？ – Steve

不，總是默認由瀏覽器設置「margin-top」，即使您沒有以任何方式設置樣式。 – martin

沒錯。不知道。異常。謝謝。 – Steve

作爲父元素崩潰時子元素被給予float:left或float:right。您需要清除父元素中的浮動元素，這裏您的父項爲UL，子項爲LI。

請參閱下面的CSS，這可能會解決：

假設這HTML結構：

<ul class="clear"> 
    <li class="floated">...</li> 
    <li class="floated">...</li> 
    <li class="floated">...</li> 
</ul> 

.clear:before, 
.clear:after { 
    content: " "; 
    display: table; 
} 

.clear:after { 
    clear: both; 
}

另外，15px差距你看到的是因爲考慮到margin-bottom:15px的。

#menu-primary-menu { 
    list-style-type: none; 
    margin-bottom: 15px; 
}

您可以相應地調整邊距（如果需要）。

來源

2016-03-03 07:49:23

謝謝@Nukul Ghosh！ – Steve

元素與邊距之間的垂直間隙0

回答

相關問題