46

私は確かに初心者ですが、これを投稿する前にかなりの量の検索も行いました。div 要素の周りに余分なスペースがあるようです。また、border: 0、padding: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>

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

div 要素の周りの余分なスペース

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

4

7 に答える 7

73

bodyデフォルトで 8px余白があります: http://www.w3.org/TR/CSS2/sample.html

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

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

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

* 以下よりもグローバルでないものが必要な場合：

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 リセット:

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/
…</p>

于 2012-03-03T15:36:20.817 に答える
10

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

body{
padding:0px;
margin:0px;
}
于 2012-03-03T15:36:43.180 に答える
4

CSS に以下を追加してみてください。

body, html{
    padding:0;
    margin:0;
}
于 2012-03-03T15:34:54.530 に答える
3

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

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

これを CSS に追加します。

body { margin: 0; padding: 0; }
于 2012-03-03T15:35:41.190 に答える
2

これで行く

body {
    padding:0px;
    margin:0px;
}
于 2016-08-05T04:38:17.877 に答える
0

私は同じ問題を抱えていて、最初の<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 タグだけでなく、すべての子要素をチェックすることを忘れないでください。

于 2017-12-19T02:57:19.303 に答える