要素をhtml要素の幅にする方法を教えてください。

Question

何らかの理由で、私は検索エンジンに正しい言葉を入れることができません。それは本当に簡単なことのようです。

<div>Hello!</div> 

そして、私は次のスタイルを適用します：さんは次のように私は簡単なマークアップを持っているとしましょう

body { 
    background: blue; 
} 

div { 
    background: green; 
    width: 100%; 
} 

今、理想的に、私は画面全体伸ばすために緑を好きですが、何らかの理由だろうウィンドウの端とdivの間のバッファを青色にします。私がdivを調べるために行くとき、私は0パディング/マージンとちょうどコンテンツボックスがあることに注意します。私はHTML要素を調べます。パディング/マージンのない単なるコンテンツです。

私の質問は、どうすればhtmlとdivの間の青色のバッファ領域を取り除くことができますか？私が成功裏に遂行した唯一の方法は、部門の負のマージンですが、それはハッキリのようです。何かご意見は？

Answer 1

、すべてのブラウザは、要素のいくつかdefault stylingを行います。これにはbody要素のマージンが含まれます。これらの既定のスタイルを上書きするには（たとえば、ChromeのF12を使用して、ブラウザの開発者ツールを使用して確認できます）、カスタムCSSルールを設定します。具体的な問題については、bodyタグのスタイリングにmargin: 0を追加する必要があります。

すべてのブラウザに異なるデフォルトが設定されているため、多くの開発者がのスタイリングを完全に適用する前にリセットすることに決めました。これにより、より一貫性のある合理化されたCSS開発プロセスが可能になります。これらのリセットスタイリングのいくつかがあります。有名なものはEric Meyer's CSS resetです。

Answer 2

本文要素は、すべての方向が8pxの長さにデフォルトのマージンを持つため、このデフォルトを書き換えてください。

body { 
    margin: 0; 
    background: blue; 
} 

@Edit： ...また、それは使用して '開発者ツール' を練習するための素晴らしい例です。素晴らしいガイドがあります：https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Answer 3

このような質問がある場合は、CSS box modelにお問い合わせください。あなたは体からマージンを取り除くだけです。でも、適用される任意のCSSなし

body { 
 
    background: blue; 
 
    margin: 0px 
 
} 
 

 
div { 
 
    background: green; 
 
    width: 100%; 
 
}

<div>Hello!</div>