css - 全幅のページ div

Question

私はウェブサイトを設計しています。ブラウザの上部にシンプルな色付きの div を表示しようとしています。単純に使用してみました:

div{
    width:100%;
}

しかし、画面の両側と上部に空白があることに気付きました。

画面全体を埋める Facebook の青いヘッダーに似たものを探しています。

これを達成する方法について何か提案はありますか?

Answer 1

すべてのブラウザで、body. したがって、次のことを試して、結果を再確認してください。

*{margin: 0; padding: 0;}

上記のコードは、すべてのタグからすべての余分なマージンとパディングを削除します!

ただし、アプリケーションのキックスタート設計にはnormalize.cssを使用する必要があります。

Answer 2

ボディに余裕はありましたか？

追加してみてください：

body {
 margin: 0;
 padding: 0;
}

または、次のようなスタイルのリセットを使用します: http://necolas.github.io/normalize.css/

Answer 3

これは、ブラウザのデフォルト スタイルが原因です。これを使用してリセットします。

* {
    margin: 0;
    padding: 0;
}

デモ

それに加えて、すべての HTML 要素のスタイリングを一貫したベースラインにリセットする一連の CSS ルールを提供するcss resetを参照することをお勧めします。