ファーストを使用し、何よりも、私は目的を学ぶためにこの質問をしていますし、より良いCSSを理解することはありません。私の質問はこれですCSSレイアウト - ホワイトスペースの任意のパディング
https://necolas.github.io/normalize.css/
:第二に、私はこの正規版を使用しています。私は私のヘッダ要素に0にパディングを設定すると、私は私のレイアウトの上部に白い境界線を得る:私は私のヘッダ上の任意のパディング量を設定すると、
しかし、それは仕事のことを行います
誰でもこの理由を教えていただけますか?
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>
空白があるため 'h1'からマージンです。あなたは、あなたのウェブサイトがダウンしているか、問題がもう存在しない場合、この質問は将来的には役に立たないので、ここであなたの問題を再現しようとするべきです。 – APAD1
私は知っている、と私はjsfiddleや他の何かを使用してそうする方法を考えます。ありがとうbtw! :) – Hardist
問題を再現できるように正規化を使わずにjsfiddleリンクを追加しました。 – Hardist