HTML/CSS-margin:0にしても上の隙間が消えない！

しょうもないことで長時間悩んでしまったので、同じことで悩む人を出さないためにまとめときます。

サイトの上部に表示するタイトルヘッダーって、画面の上に隙間なく置きたいですよね。

なんですが、

このサイトのタイトルだよ!

中の文章～～～
～～～～～～～

<div id="body1">
  <div id="title1">このサイトのタイトルだよ!</div>
  <div id="text1">中の文章～～～<br>～～～～～～～</div>
</div>

<style type="text/css">
#body1{
  background-color:#333;
  height:200px;
  margin:0;
}
#title1{
  background-color:#fff;
}
#text1{
  color:#fff;
}
</style>

(body1のdivはbody要素と思っておらって大丈夫です)
こんな風にかくと見ての通りタイトルの上に隙間が開いています。

これを一番上にもってきたい！と思って、調べてみると「勝手に入れられているmarginが悪いから、margin:0;を入れればいい」と出てくるのですが、それをやっても直らない！！！

でも、よくよく考えると、

divはブロック要素
ブロック要素は前後に改行が挿入される

・・・あ、divにしてたら前に改行入っちゃうじゃん・・・

というわけで、これを改善するには

1.divタグで囲まない

このサイトのタイトルだよ!

中の文章～～～
～～～～～～～

<div id="body2">
  このサイトのタイトルだよ!
  <div id="text2">中の文章～～～<br>～～～～～～～</div>
</div>

<style type="text/css">
#body2{
  background-color:#333;
  height:200px;
}
#text2{
  color:#fff;
}
</style>

2.divタグをインライン要素にする

このサイトのタイトルだよ!

中の文章～～～
～～～～～～～

<div id="body3">
  <div id="title3">このサイトのタイトルだよ!</div>
  <div id="text3">中の文章～～～<br>～～～～～～～</div>
</div>

<style type="text/css">
#body3{
  background-color:#993;
  height:200px;
}
#title3{
  display:inline;
  background-color:#fff;
}
#text3{
  color:#fff;
}
</style>

このどちらかで解決できます。
どうしてもdivで囲いたいけど、前後の改行は無くしたいときはインライン要素にしましょう

追記

この後いろいろ試してたら原因は別だったみたいで。

サイトをDeveloper Toolで見てみたら(F12を押すと出ます)、

＿人人人人人人人人人人＿
＞　　謎の空白文字　　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

＿人人人人人人人人人人人人人人人人人人人人人＿
＞　しかもheadに書いてるものがbodyにいる　　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

謎でしかない。

Deveoper Tool上でこれを直接消したところ上の隙間が消えたのでこれが原因だったみたい

ソースコードの片っ端から空白や改行を消すしかないんだろうか

更に追記

実は、私は複数のページで使うような内容をHTMLファイルとして、それぞれのページでは

<?php
  include'xxx.html';
?>

として読み込んでいるんですが、

どうやらそのときに文頭に謎の文字が挿入されるようで。

それが改行となっていたようです。

このやり方にする限り直らないのかな

さらにさらに追記

この謎の文字、BOMというらしく、ちゃんと解決法が乗ってました。

http://www.barnetshenkinbridge.com/other/1538/#?1#?1#WebrootPlugIn#?1#?1#PhreshPhish#?1#?1#agtpwd

追記が多くなってしまったので、別記事にまとめようと思います。