web-dev-qa-db-ja.com

本文の周囲の余白を削除する方法、またはデフォルトのCSSスタイルをクリアする方法

私は確かに初心者ですが、これを投稿する前にかなりの量の検索も行いました。 div要素の周りに余分なスペースがあるようです。また、ボーダー：0、パディング：0などの多くの組み合わせを試してみましたが、空白を取り除くものは何もなかったと指摘したいと思います。

コードは次のとおりです。

<html>
<head>
    <style type="text/css">
        #header_div  {
            background: #0A62AA;
            height: 64px;
            min-width: 500px;
        } 
        #vipcentral_logo { float:left;  margin: 0 0 0 0; }
        #intel_logo      { float:right; margin: 0 0 0 0; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

これは次のようになります（余分なスペースを明示的に呼び出すために赤い矢印を挿入しました）。

Extra space around a div element

青い色がブラウザの端とツールバーに直接接していると思っていました。画像の高さは正確に64ピクセルで、背景色は#header_divに割り当てられたものと同じです。どんな情報も大歓迎です。

htmlcssmargincss-reset
30
Anthony

bodyにはデフォルトのマージンがあります： http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */

または、これを使用できますグローバルリセット

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

もっと少ないものが必要な場合*globalより：

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

その他CSS Reset：

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…

48
Roko C. Buljan

bodyタグからパディング/マージンを削除してみてください。

body{
padding:0px;
margin:0px;
}
9
Kevin Bowersox

cSSで次の広告を試してください。

body, html{
    padding:0;
    margin:0;
}
3
Alex

それがbody要素のデフォルトのマージン/パディングです。

一部のブラウザーにはデフォルトのマージンがあり、一部にはデフォルトのパディングがあり、両方ともbody要素のパディングとして適用されます。

これをCSSに追加します。

body { margin: 0; padding: 0; }
3
Guffa

BODY MARGINをゼロに設定しても、この問題が続くことがわかりました。

ただし、簡単な修正方法があります。以下に示すように、HEADERタグに1pxの境界線を設定し、BODY MARGINをゼロに設定するだけです。

body { margin:0px; }

header { border:1px black solid; }

HEADER内にH1、H2タグがある場合、これらのタグのMARGINをゼロに設定する必要もあります。これにより、表示される可能性のある余分なスペースがなくなります。

なぜこれが機能するのかはわかりませんが、Chrome browserを使用します。明らかに、ヘッダーの色に合わせて境界線の色を変更することもできます。

2
wardheed

これで行く

body {
    padding:0px;
    margin:0px;
}
0
Amit Mahnot

同じ問題があり、最初の<p>要素。ページの上部にあり、ブラウザのWebkitのデフォルトマージンもありました。これはdiv全体を押し下げて、あなたが話していたのと同じ効果があったので、ページの一番上にあるテキストベースの要素に注意してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

したがって、htmlタグとbodyタグだけでなく、すべての子要素をチェックすることを忘れないでください。

0
Daniel