0

我想在标题 div 的上方和下方创建一个空间，所以我给了它一个 margin-top 和 margin-bottom。但是，margin-bottom 并没有在底部添加空格。相反，它将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;
}
4

3 回答 3

1 
.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-06T11:06:12.783 回答
0

您有浮动导航，但您的标题没有指定高度。在导航后使用一些元素清除或应用溢出：隐藏；到你的标题。例如：

.header {
    width: 800px;
    margin: 25px auto;
    overflow: hidden;
}
于 2013-04-06T10:30:23.843 回答
0 
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-06T10:30:34.653 回答