CSSの枠線の周囲にある空白を取り除くにはどうすればよいですか？

私はちょうどCSS & HTMLを使いこなし、私のウェブサイトの上部に背景色のヘッダーを追加しました。その後、ヘッダーの背景色とその辺の上に白いスペースがたくさんあることがわかりました。 CSSを使用してこの空白を取り除くにはどうすればよいですか？ここでは、ウェブサイトが今どのように見えるかの絵と一緒に私のコードは次のとおりです。CSSの枠線の周囲にある空白を取り除くにはどうすればよいですか？

<!DOCTYPE html> 
<html> 

<head> 
<title> 
Website 
</title> 
<link rel='stylesheet' href='style.css'/> 
    <script src='script.js'></script> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 

    <style> 
    .typeofvirus{ 
    font-family: 'Open Sans', sans-serif; 
    } 
     br { 
    line-height: 2%; 
} 

    #topheader{ 
    background-color: #2c3e50; 
width: 100%; 
color: white; 
margin-top: -1%; 

     } 
    html, body { 
margin: 0px; 
padding: 0px; 
} 
    </style> 
</head> 
    <body> 

    <p></p> 
     <section id = "topheader"> 
     <div id = "topheaderdiv"> 
    <h1 style = "font-family: 'Baloo Bhaina', cursive; text-align: center;"><big>Hello</big><br><small><small><small style = "font-family: 'Nunito', sans-serif;">This is a webpage</small></small></small></h1> 
    </div> 
    </section> 
<h2 class = "typeofvirus">What are Microbes?</h2>  
<p></p> 
<h3 class = "typeofvirus"><big>Types of viruses caused by microbes in the bathroom</big></h3> 
<ul> 
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Dermatophitic fungi</big></i>: Caused by people walking barefoot in bathrooms</li> 
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Gastrointestinal viruses</big></i>: Caused by contact with a toilet. This can remain on a solid surface for over a week. This causes stomach ailments.</li> 
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Residual fungi</big></i>: which can cause asthma or allergies. This is caused by the mold in the bathroom due to lack of cleaning.</li> 
</ul> 
</body> 

    </html>

出典

2017-05-23 Anonymous

あなたもhtmlを共有できますか？またはフィドル – tech2017

は完全なコードを追加しました –

あなたもあなたのbodyとhtmlマージンとパディングをリセットする必要があります。

あなたのCSSにこれを追加します：

html, body { 
    margin: 0px; 
    padding: 0px; 
}

出典

2017-05-23 19:52:36 anned20

あなたの答えは側面の白いスペーシングを取り除きましたが、上にはありません –

私はanned20の答えに行くだろうが、学問的好奇心のために、

overflow: hidden;

to body and htmlまたは手動で要素に負の上部余白とこの

#topheader{ 
    background-color: #2c3e50; 
    width: 100%; 
    color: white; 
    margin-top: -1%; 
}

のような100％の幅を与える。しかし、再び、のannedソリューションが理想的です。

出典

2017-05-23 20:12:26 Adi

CSSの枠線の周囲にある空白を取り除くにはどうすればよいですか？

答えて

関連する問題