cssでdivを指定した時上に出る空白を消したい

Question

ボディにdivひとつだけを入れ、cssでそれに色をつけて、レイアウトを試しているのですが、div要素上部とフレームの間に空白が出来ます。headerや他のdivも入れている他のページでは余白なしに表示されるのですが、divだけでは上に空白が出来て、headerと同じcssで試してみても消えませんでした。何が原因かわかりません。どうすれば直るでしょうか。

Answer 1

以下の指定をCSSの一番上に入れてみてください。

* {
    margin: 0;
    padding: 0;
    vertical-align:bottom;
}

上記は、ブラウザが持つ初期CSSを打ち消すリセット例です。
余白など無指定でも、ブラウザが持つ初期CSSが効いている場合が多いです。
※アスタリスク「*」で全要素を指定となります

Answer 2

実際のコードを見てみないことには詳細は分かりませんが、
（宜しければ実際のコードを記載して頂ければと思います。）

ボディにdivひとつだけを入れ

このボディに入れたdivに、marginもしくはpaddingがかかっているか、（※1）

div要素上部とフレームの間に空白

この隣接しているフレームに、marginもしくはpaddingがかかっているか、（※2）

という2点が考えられるのでは、と思われます。
また、ブラウザにデフォルトにかかっているmarginもしくはpaddingの可能性も考えられますが、

headerや他のdivも入れている他のページでは余白なしに表示されるのですが

との事ですので、その可能性は無いかと考えられます。
よって、※1, ※2の可能性では、と思われます。

Comments

[yamanoharu0129]

marginを0pxに指定したところ解消しました。
原因の可能性をあげて説明してくださったので、ベストアンサーにさせていただきます。ありがとうございました。

Answer 3

対象の要素にmargin:0pxを設定してみてはどうでしょう。