元素与边距之间的垂直间隙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

回答

相关问题