web-dev-qa-db-ja.com

CSS：デフォルトウィンドウの「パディング」を削除するにはどうすればよいですか？ 100％幅に設定された要素がウィンドウの境界に到達しません

だから私は体の中に直接配置される要素を持っています：

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

使用されるCSSは次のとおりです。

body{
    text-align:center;
}
#header{
    margin:auto;
}

したがって、＃header divは100％幅（デフォルト）に設定され、中央に配置されます。問題は、ウィンドウの境界と#header要素の間に「スペース」があることです。

|  |----header----|   |
^window border        ^window border

私はjavascriptでそれを調整しようとしましたが、要素を正確なウィンドウ幅に正常にサイズ変更しましたが、「スペース」を排除しません：

$('#header').width($(window).width());

1つの解決策は、次のCSSルールを追加することです（上記のJavaScriptを保持する）。

#header{
    margin:auto;
    position:relative;
    top:-8px;
    left:-8px;
}

私のブラウザでは、この「スペース」は8pxですが、すべてのブラウザで同じかどうかはわかりませんか？ UbuntuでFirefoxを使用しています...

それで、このスペースを取り除く正しい方法は何ですか-そして、それが私が上で使用したものであるならば、すべてのブラウザは同じように振る舞いますか？

htmlcsspositionwidthpadding
25
Alex

bodyはすべてのブラウザでデフォルトのマージンを持っているので、あなたがする必要があるのはそれらを取り除くだけです：

body {
    margin: 0;
    text-align: center;
}

その後、#headerから負のマージンを削除できます。

50
BoltClock

この問題を解決する簡単な方法は、すべてのマージンを取り除くことです。そして、次のコードでそれを行うことができます。

* {
    margin:0;
}

これにより問題が解決し、すべての要素のマージンをより細かく制御できます。

10
Bups

次のように、これらをstyleのbodyタグに追加します。

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

それは私のために働いた。幸運を！！

2
Tharindulucky

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

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

body { margin:0px; }

header { border:1px black solid; }

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

0
wardheed