誰も私の部門間に<body>のスペースがある理由を教えてもらえますか？

私はコーディングや新しいことに新しいですし、this fiddleのdivの間にボディのスペースがあるのはなぜですか？誰も私の部門間に<body>のスペースがある理由を教えてもらえますか？

HTML：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <title>title</title> 
    <link href="main.css" rel="stylesheet" type="text/css"> 
    <meta charset="UTF-8"> 
</head> 
    <!-- body --> 
<body> 
    <div class="top-navbar navbar" id="color-1"> 
    <a href="about.html">About</a> 
    <a href="art.html">Art</a> 
    <a href="home.html">Home</a> 
    </div> 

    <div class="image"> 
    <img src="sgrumble.png" alt="sg-rumble" class="front-image"> 
    </div> 

    <div class="top-bar-2 navbar" id="color-1"> 
    <a href="#project">Project</a> 
    <a href="#divname">Champions</a> 
    <a href="#divname2">divname2</a> 
    <a href="#divname3">divname3</a> 
    </div> 

    <div class="about-text" id="color-1"> 
    <h4>title</h4> 
    <p>short info text about text text text text text text text text text</p> 
    </div> 

    <div class="collection art" id="project color-2"> 
    <h3>text</h3> 
    <p>text.</p> 

    <div class="project-blue"> 
     <img src="/asset/images/project-ashe256x256.png" class="project-ashe"> 
    </div>

CSS：

body { 
    margin: 0; 
    padding: 0; 
    background-color: green; 
} 
#color-1 { 
    background-color: #d3d3d3; 
} 
#color-2 { 
    background-color: #fff; 
} 
.top-navbar { 
    width: 100%; 
    height: 50px; 
} 
.top-navbar a { 
    padding: 14px 16px; 
    text-align: center; 
    float: right; 
    display: block; 
    color: black; 
    text-decoration: none; 
} 
.top-navbar a:hover { 
    background-color: #8a8a8a; 
} 
.image { 
    width: 100%; 
    height: 491px; 
    background-color: red; 
} 
.top-bar-2 { 
    width: 100%; 
    height: 50px; 
    text-align: center; 
} 
.top-bar-2 a { 
    padding: 14px 16px; 
    text-align: center; 
    display: inline-block; 
    color: black; 
    text-decoration: none; 
} 
.top-bar-2 a:hover { 
    background-color: #8a8a8a; 
} 
.collection { 
    height: 300px; 
    width: 100%; 
    text-align: center; 
    background-color: blue

体が第二ナビゲーションバー二つのテキストのdivの間に表示されている緑色部分。誰もが間違った原因を知っている私はそれを見つけることができません。

出典

2017-08-26 grecko xd

これは、ヘッダー要素の余白がreset the defaultではないために発生します。あなたのシートの上部に

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box 
}

を使用して

リセットデフォルト設定。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: green; 
 
} 
 

 
#color-1 { 
 
    background-color: #d3d3d3; 
 
} 
 

 
#color-2 { 
 
    background-color: #fff; 
 
} 
 

 
.top-navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.top-navbar a { 
 
    padding: 14px 16px; 
 
    text-align: center; 
 
    float: right; 
 
    display: block; 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.top-navbar a:hover { 
 
    background-color: #8a8a8a; 
 
} 
 

 
.image { 
 
    width: 100%; 
 
    height: 491px; 
 
    background-color: red; 
 
} 
 

 
.top-bar-2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    text-align: center; 
 
} 
 

 
.top-bar-2 a { 
 
    padding: 14px 16px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.top-bar-2 a:hover { 
 
    background-color: #8a8a8a; 
 
} 
 

 
.collection { 
 
    height: 300px; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: blue

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <title>title</title> 
 
    <link href="main.css" rel="stylesheet" type="text/css"> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
<!-- body --> 
 

 
<body> 
 
    <div class="top-navbar navbar" id="color-1"> 
 
    <a href="about.html">About</a> 
 
    <a href="art.html">Art</a> 
 
    <a href="home.html">Home</a> 
 
    </div> 
 

 
    <div class="image"> 
 
    <img src="sgrumble.png" alt="sg-rumble" class="front-image"> 
 
    </div> 
 

 
    <div class="top-bar-2 navbar" id="color-1"> 
 
    <a href="#project">Project</a> 
 
    <a href="#divname">Champions</a> 
 
    <a href="#divname2">divname2</a> 
 
    <a href="#divname3">divname3</a> 
 
    </div> 
 

 
    <div class="about-text" id="color-1"> 
 
    <h4>title</h4> 
 
    <p>short info text about text text text text text text text text text</p> 
 
    </div> 
 

 
    <div class="collection art" id="project color-2"> 
 
    <h3>text</h3> 
 
    <p>text.</p> 
 

 
    <div class="project-blue"> 
 
     <img src="/asset/images/project-ashe256x256.png" class="project-ashe"> 
 
    </div>

出典

2017-08-26 17:43:16

H4とp要素はマージンが設定されています。 "inspect"オプションを使用すると、ブラウザの要素を右クリックすることがわかります。

出典

2017-08-26 17:45:00 Juan

緑は体色です。背景色のある要素がない場合は、重なっているものがないため、本体色があります。

CSSのboxmodelが参考になっ次のようになります。https://www.w3schools.com/css/css_boxmodel.asp

Marginプロパティは、要素の外側の部分です。

出典

2017-08-26 17:48:51 glupiec

が解決：

h3,h4,p{ 
 
    margin:0; 
 
} 
 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
    background-color: green; 
 
} 
 
#color-1 { 
 
\t background-color: #d3d3d3; 
 
} 
 
#color-2 { 
 
\t background-color: #fff; 
 
} 
 
.top-navbar { 
 
\t width: 100%; 
 
\t height: 50px; 
 
} 
 
.top-navbar a { 
 
\t padding: 14px 16px; 
 
\t text-align: center; 
 
\t float: right; 
 
\t display: block; 
 
\t color: black; 
 
\t text-decoration: none; 
 
} 
 
.top-navbar a:hover { 
 
\t background-color: #8a8a8a; 
 
} 
 
.image { 
 
\t width: 100%; 
 
\t height: 491px; 
 
\t background-color: red; 
 
} 
 
.top-bar-2 { 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t text-align: center; 
 
} 
 
.top-bar-2 a { 
 
\t padding: 14px 16px; 
 
\t text-align: center; 
 
\t display: inline-block; 
 
\t color: black; 
 
\t text-decoration: none; 
 
} 
 
.top-bar-2 a:hover { 
 
\t background-color: #8a8a8a; 
 
} 
 
.collection { 
 
\t height: 300px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t background-color: blue 
 
\t

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
<head> 
 
    <title>title</title> 
 
    <link href="main.css" rel="stylesheet" type="text/css"> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
    <!-- body --> 
 
<body> 
 
    <div class="top-navbar navbar" id="color-1"> 
 
    <a href="about.html">About</a> 
 
    <a href="art.html">Art</a> 
 
    <a href="home.html">Home</a> 
 
    </div> 
 
    
 
    <div class="image"> 
 
    <img src="sgrumble.png" alt="sg-rumble" class="front-image"> 
 
    </div> 
 
    
 
    <div class="top-bar-2 navbar" id="color-1"> 
 
    <a href="#project">Project</a> 
 
\t <a href="#divname">Champions</a> 
 
\t <a href="#divname2">divname2</a> 
 
\t <a href="#divname3">divname3</a> 
 
    </div> 
 
    
 
    <div class="about-text" id="color-1"> 
 
\t <h4>title</h4> 
 
\t <p>short info text about text text text text text text text text text</p> 
 
    </div> 
 
    
 
    <div class="collection art" id="project color-2"> 
 
    <h3>text</h3> 
 
\t <p>text.</p> 
 
\t 
 
\t <div class="project-blue"> 
 
\t <img src="/asset/images/project-ashe256x256.png" class="project-ashe"> 
 
\t </div>

出典

2017-08-26 17:49:02

使用してその良い：

* {margin:0;padding:0;}

をこれは、ドキュメント内のすべてのスペースを削除します。

注：htmlでは、ドキュメント自体にデフォルトのスペースがあります。上記のCSSによって簡単に削除することができます。

上記のCSSをすべてのスタイルシートファイルで使用することをお勧めします。

出典

2017-08-26 17:49:48

次のCSSを指定すると（既存のものに追加できます）、スペースが削除されます。

.about-text { 
    overflow: hidden; 
} 

.collection { 
    overflow: hidden; 
}

出典

2017-08-26 18:02:57

なぜこれが機能するのか説明してください。 – Alohci

誰も私の部門間に<body>のスペースがある理由を教えてもらえますか？

答えて

関連する問題