保证金底部添加到顶部

我想创建一个空间在我的头div上方和下方，所以我给它一个保证金顶和保证金底。尽管底部没有增加空间。相反，它将margin-bottom添加到顶部，而下面的内容恰恰相反。保证金底部添加到顶部

这是字面上所有的代码，我至今在我的身上：

<body> 
    <div class="header"> 
     <img class="logo" src="Images/logo.png"/> 
     <ul class="navigation"> 
      <li class="Twitter"> 
       <a href="http://twitter.com/AccountLink"> 
        <img src="Images/twitter.png"/> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <div class="banner"><img src="Images/banner.jpg"/></div> 
</body>

而且我的CSS：

ul { 
    list-style-type: none; 
} 

.header { 
    width: 800px; 
    margin: 0px auto; 
    margin-top: 25px; 
    margin-bottom: 25px; 
} 

.header .logo { 
    padding-top: 10px; 
    float: left; 
} 

.header .navigation { 

    float: right; 
}

来源

2013-04-06 Andrew

哪个元素，你指什么？你在'header'上明确地设置了'margin-top'，这就是它在那里的原因。我不明白这个问题。 – 2013-04-06 10:20:03

你想要什么？仅在头部的底部添加边距？ – 2013-04-06 10:28:27

.header { 
    width: 800px; 
    margin: 25px auto; 
    overflow: hidden; 
} 

.banner { 
    display: inline-block; 
    margin: 25px auto; 
    width: 100%; 
}

兼容性表：http://caniuse.com/#feat=inline-block

来源

2013-04-06 11:06:12 glocsw

您已漂浮导航，但你的头不指定高度。导航后应用某些元素清除或应用溢出：隐藏;到您的标题。例如：

.header { 
    width: 800px; 
    margin: 25px auto; 
    overflow: hidden; 
}

的浏览器

来源

2013-04-06 10:30:23 Kaloyan

try using padding instead of margin 

    padding-top: 25px; 
    padding-bottom: 25px; 

also add 
.banner{ padding-top:10px;} 

or adjust to your needs

来源

2013-04-06 10:30:34

保证金底部添加到顶部

回答

相关问题