CSSのリセットがChromeで適用されてない？

リセットといってもmargin: 0;にしただけなんですが上に余白がでます。
![結果]WIDTH:600

lang
1    <style>
2        body{
3            margin: 0;   
4        }
5        p{
6            background-color: aqua;   
7        }
8    </style>
9<body>
10    <p>
11        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
12        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
13        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
14        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
15        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
16        Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
17    </p>
18</body>

どうしてですか？
===追記===
回答ありがとうございます。自己解決したんですが<p>要素のmarginがなんちゃらってのが少し理解できてないので、よろしければサンプルをくれませんか？

行動規範の内容に同意します

回答4件

もしも、他の方の回答で解決していないのでしたら一度HTMLを再度上書き保存して、
その際 unicodeにBOMが付いて無いか確認されてみてはいかがでしょうか？
BOM付の場合ご質問の様な状態になります。

投稿2015/06/01 07:12

退会済みユーザー

総合スコア0

ベストアンサー

よくあることです。他の回答者さんの言うとおり、p要素のmarginが0でないことによる余白です。

lang
1p {
2    margin: 0;
3    background-color: aqua;
4}

としてみてください。

ブラウザが勝手にp要素に対してはじめからmarginをある数値に設定していることによるものです。

marginとは、ボックスの外側の余白で、自分(要素)と他の要素との間隔を調整します。
それに対してpaddingというものがあり、こちらはボックスの内側の余白で、自分が囲んでいる要素(子要素)との間隔を調整します。
marginについては相殺などの仕様があります。詳しくはこちら(http://kojika17.com/2012/08/margin-of-css.html)を参照ください。

投稿2015/06/01 05:14

編集2016/01/30 07:22