2016-06-29 5 views
2

ファーストを使用し、何よりも、私は目的を学ぶためにこの質問をしていますし、より良いCSSを理解することはありません。私の質問はこれですCSSレイアウト - ホワイトスペースの任意のパディング

https://necolas.github.io/normalize.css/

:第二に、私はこの正規版を使用しています。私は私のヘッダ要素に0にパディングを設定すると、私は私のレイアウトの上部に白い境界線を得る:私は私のヘッダ上の任意のパディング量を設定すると、

Not Working JSFiddle

しかし、それは仕事のことを行います

Working JSFiddle

誰でもこの理由を教えていただけますか?

html, 
 
body { 
 
    height: calc(100% - 100px); 
 
} 
 
body { 
 
    font-family: verdana; 
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 125px; 
 
    padding: 0; 
 
    background-color: red; 
 
} 
 
nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
    background-color: yellow; 
 
} 
 
aside { 
 
    float: left; 
 
    width: 200px; 
 
    height: calc(100% - 25px); 
 
    padding: 10px; 
 
    background-color: blue; 
 
} 
 
section { 
 
    float: right; 
 
    padding: 10px; 
 
    height: calc(100% - 25px); 
 
    width: calc(100% - 200px); 
 
    background-color: green; 
 
} 
 
footer { 
 
    position: fixed; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
    background-color: orange; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <header> 
 
    <h1>Header</h1> 
 
    </header> 
 
    <nav>Menu</nav> 
 
    <aside>Aside</aside> 
 
    <section>Content</section> 
 
    <footer>Footer</footer> 
 
</div>

+0

空白があるため 'h1'からマージンです。あなたは、あなたのウェブサイトがダウンしているか、問題がもう存在しない場合、この質問は将来的には役に立たないので、ここであなたの問題を再現しようとするべきです。 – APAD1

+0

私は知っている、と私はjsfiddleや他の何かを使用してそうする方法を考えます。ありがとうbtw! :) – Hardist

+0

問題を再現できるように正規化を使わずにjsfiddleリンクを追加しました。 – Hardist

答えて

2

あなたは余裕が崩壊し、その親のマージンに影響を与えていない、あなたのヘッダー内のH1を持っているためです。

これを解決するには、親要素にoverflow: auto;を追加できます(この場合は、<header>タグ内にあります)。


MORE INFO:

CSS margin-top of affects parent's margin

+0

あなたの答えをありがとう:) – Hardist