CSS <body>トップマージン

私は比較的新しく自己教えられたフロントエンド開発者です。私は私の文書の上のマージンにこの問題があります。それは一番上のマージンです。CSS <body>トップマージン

通常、私はセレクタを使用していますが、それはすべての要素にこれまでどんな余裕が残っていません。しかし、私はそれが良い方法ではないと言われており、すべてのマージンとパディングをすべての要素（？）から取り除きたくはありません。

私はボディセレクタを使用しようとしており、そのマージンは0でした。パディング：0;それでも、それは一番上にこのマージンです。これを行う「正しい」方法は何ですか？

私のHTMLとCSSです。

@import url('https://fonts.googleapis.com/css?family=Work+Sans:500'); 
 

 
body { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
header { 
 
\t background-color: red; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <title>My Website</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t <header id="top"> 
 
\t \t \t <h1>My Website</h1> 
 
\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#about">ABOUT</a></li> 
 
\t \t \t \t \t <li><a href="#contact">CONTACT</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </header> 
 

 
\t \t <section id="about"> 
 
\t \t \t <h2>Semi heading</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t </section> 
 

 
\t \t <section id="contact"> 
 
\t \t \t <h2>Semi Header</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t </section> 
 
\t </div> 
 
</body> 
 
</html>

出典

2017-11-29 Christian Torblå

@VXpそれは何も問題ありません。 " – Johannes

@dippasは重複していると思われる質問を指しています。*と*は*特定の*質問には答えません。 – Johannes

原因は「崩壊マージン」と呼ばれる現象である：ボディマージントップでどのような要素は、第1本体の内側に、そのmargin-topは「崩壊」（=団結）されますされています。したがって、あなたの場合は、最初のh1要素（ブラウザのスタイルシートで定義されているデフォルトのマージン）です。マージン・トップはボディを拡張し、ボディのミーリング・トップを作成します。通常、h1はパディングで、通常はDIVだろうヘッダーまたは似たような、内側になることなど「あなたがwouldnだから：

h1:first-of-type { 
    margin-top: 0; 
}

注：

あなたは、この現象を回避するために、これを適用することができますそのh1のコンテナにはおそらくmargin-topがなく、h1はヘッダーの最上部に配置されないため、これを適用する必要があります。すべての要素のすべてのマージンを再定義が必要となるので、私はそう簡単に「言わないであろう、ゼロに（ブラウザのスタイルによって定義された）すべての要素のすべての余白をリセットする

@import url('https://fonts.googleapis.com/css?family=Work+Sans:500'); 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background-color: red; 
 
} 
 

 
h1:first-of-type { 
 
    margin-top: 0; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <title>My Website</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <header id="top"> 
 
     <h1>My Website</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#about">ABOUT</a></li> 
 
      <li><a href="#contact">CONTACT</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 

 
    <section id="about"> 
 
     <h2>Semi heading</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </section> 
 

 
    <section id="contact"> 
 
     <h2>Semi Header</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </section> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-11-29 23:36:01 Johannes

答えて

関連する問題