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

フローティング ナビゲーションがありますが、ヘッダーの高さが指定されていません。いくつかの要素を使用して、ナビゲーション後にクリアするか、overflow: hidden; を適用します。あなたのヘッダーに。例えば：

.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 に答える