web-dev-qa-db-ja.com

CSSマージン：0は0に設定されていません

私はウェブデザインの新参者です。以下のように、CSSとHTMLを使用してWebページレイアウトを作成しました。問題は、マージンを0に設定しても、上部のマージンが0に設定されず、スペースが残ることです。この空白をクリアするにはどうすればよいですか？

問題のスクリーンショット

There's a space in top

スタイルシート

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

[〜＃〜] html [〜＃〜]

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

これがファイル全体です

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

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

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>
htmlcssmargin
24
Nipuna

試して...

body {
   margin: 0;
   padding: 0;
}

jsFiddle 。

ブラウザは異なるデフォルトのスタイルシートを使用しているため、一部の人々は Eric Meyer's Reset Reloaded などのresetスタイルシートを推奨しています。

35
alex

実際のページをmargin：0に、padding：0を本文だけでなく実際のhtmlに設定する必要があります。

これをcssスタイルシートで使用します。

*, html {
    margin:0;
    padding:0;  
}

これにより、ページ全体が0に設定され、マージンやパディングなしのクリーンスタートが開始されます。

21
Dan G

次のいずれか（または両方）が必要です。

  1. ボディにパディング！= 0
  2. #headerのマージン！= 0

試してみる

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

marginは「スペース」外側ボックス、paddingは「スペース」内側ボックス（境界線とコンテンツ）。 !important後者のルールによるプロパティの上書きを防ぎます。

4
Yannick Loiseau

試してみる

html, body{
  margin:0 !important;
  padding:0 !important;
}
3
Hussein
h1 {
margin-top:0;
padding-top: 0;}

これはh1タグの誤解です。 h1タグのmargin-topお​​よびpadding-topを0（ゼロ）に設定する必要があります。

3
alter

実際に誰もあなたの質問を読んで、あなたのソースコードを見なかったようです。あなたが待っている答えは次のとおりです。

#header_content p {
    margin-top: 0;
}

jsFiddle

0
Zectbumo

これを読んで同じ問題をトラブルシューティングした後、私はそれが見出しに関連していることに同意します（h1は確かに、他の人と遊んでいない）、ブラウザスタイルはマージンを追加し、巧妙なルールでパディングを見つけて上書きするのは難しいです。

ボックスサイズプロパティをマージンとパディングに適切に適用するために使用する手法を採用しました。ボックスサイズの元の記事は CSS-Tricks にあります：

html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

これまでのところ、これは複雑なリセットを使用しないためのトリックであり、とにかく自分でデザインを適用するのがはるかに簡単になります。それが役に立てば幸い。

0
user7362925

このコードをメインCSSの先頭に追加します。

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}
0
HarshSigma