-1 
/* HTML */
<header role="heading">
    <div class="logo">
        <h1><a href="/">this is the banner</a></h1>
    </div>
<header>

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
}

header .logo
{
    margin: 30px auto;
    width: 980px;
}

.logoしたがって、 がの内側に配置されることを期待headerしますが、そうです... しかしheader、上から 30px を引き出します。

相対的に作成しようとしましheaderたが、それはセンタリング (30px 自動) が機能しない原因となります。

アドバイスをいただければ幸いです。

4

2 に答える 2

1

マージンが親にも影響を与える場合があります。次のアプローチをお勧めします。マークアップを同じに保ち、子要素のマージンの代わりにコンテナにパディングを使用します。

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
    padding:30px 0px; /* Use padding here*/
}

header .logo
{
    margin: 0px auto; /* Instead of margin here */
    width: 980px;
}
于 2013-07-24T19:21:27.187 に答える
0

ちょっと恥ずかしいですが、投稿したら質問を見て答えを見ました... 以前margin: 0 autoは中央.logoにpadding-top: 30px配置して下に移動していました。

時間を無駄にしてすみません！多分それは他の誰かを助けるでしょう。

于 2013-07-24T19:22:03.673 に答える