★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

テーマ４．不要な余白を無くす

特にスタイルを指定しなかった場合、不要な余白ができることがあります。
今回は不要な余白を無くす方法を紹介します。

＜htmlの記述と説明＞
htmlファイルに記述する必要は一切ありません。

＜cssファイルの記述例１＞

＜cssファイルの説明１＞
padding: 0;
margin: 0;
　この二行をbodyに記述すると、全体の周囲の余白が無くなる
　marginもpaddingも0にすることによって、ほぼ全てのブラウザで可能
　記述しないと、勝手にmarginとpaddingに初期値が入ってしまう
　この初期値はブラウザごとに設定されている
　逆に、大きな数字を記述すると、全体の周囲の余白が大きくなる

＜追加説明Ａ＞
paddingとは、枠の内側の余白
marginとは、枠の外側の余白
枠はpaddingとmarginの境目にあり、borderと呼ぶ
つまり、中身の外側にpadding、paddingの外側にborder、borderの外側にmargin

＜追加説明Ｂ＞
数字を１つ指定した場合は、上下左右の一括指定
数字を２つ指定した場合は、上下と左右の指定
数字を４つ指定した場合は、上右下左の順番で指定
つまり、margin:0;は、上下左右の枠の外側の余白を一括で0に指定している

＜cssファイルの記述例２＞

＜cssファイルの説明２＞
vertical-align: middle;
　この一行をimgに記述すると、画像の上下の余白が無くなる
　（本来は画像を行の中心に揃えるためのもの）
　記述しないと、一部のブラウザで余白ができてしまう
　複数のブラウザでチェックすることは大切かも

以上のような方法で、不要な余白を無くすことができます。