Html 从底部到顶部添加边距_Html_Css

Html 从底部到顶部添加边距

html css

Html 从底部到顶部添加边距,html,css,Html,Css,我想在页眉div的上方和下方创建一个空格，所以我给了它一个页边顶部和页边底部。不过，页边空白底部并没有在底部添加空格。相反，它将边距底部添加到顶部，下面的内容正好相反这就是迄今为止我身上所有的代码： <body> <div class="header"> <img class="logo" src="Images/logo.png"/> <ul class="navigation">

我想在页眉div的上方和下方创建一个空格，所以我给了它一个页边顶部和页边底部。不过，页边空白底部并没有在底部添加空格。相反，它将边距底部添加到顶部，下面的内容正好相反

这就是迄今为止我身上所有的代码：

<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>

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

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

浏览器兼容性表：

您指的是哪个元素？您在

页眉上明确设置了页边距顶部，这就是它存在的原因。我不明白这个问题，你想要什么？是否仅在页眉底部添加边距？
.header {
    width: 800px;
    margin: 25px auto;
    overflow: hidden;
}

try using padding instead of margin

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

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

or adjust to your needs

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

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