Question

我想在我的标题div上方和下方创建一个空格，所以我给它一个margin-top和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;
}

Answer 1

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

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

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

Answer 2

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

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

Answer 3

try using padding instead of margin

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

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

or adjust to your needs

保证金底部加入顶部

3 个答案: