KompoZerのCSSエディタで余白を指定する方法
KompoZerCSSエディタを使って、HTML要素の余白を指定する方法、CSSのmargin（余白）とpadding（枠内余白）の違いについても分かりやすく解説。
- 2016/8/16
- 2012/1/9
段落や汎用ブロック（divタグ）の高さ、幅、余白をCSSで調整するには、CSSエディタの「ボックスタブ」の設定を使います。
ボックスタブでは要素のサイズに関する指定のほかにもいくつか指定できる項目がありますが、ここでは最もよく使うであろう項目の指定方法についてご説明いたします。
HTML要素の高さと幅を指定するには
HTMLの要素の高さや幅を指定するには「高さ」「幅」のボックスに数値を入力して指定します。
指定する単位は%（パーセント）やpx（ピクセル）等、いくつかの単位がありますが、pxで指定するほうがページ全体のサイズの制御がしやすいと思います。
ただpx単位で指定する場合は、72dpi、96dpiといったモニタの解像度によって実際に表示される大きさが異なる場合があります。
またスタイルを適用する要素が「インライン要素（画像（img）やリンク（a）、spanといったものが該当します）」の場合は、高さの指定はできません。
ブロックレベル要素とインライン要素
ブロックレベル要素とは見出しや段落といった「まとまり」を表す要素で、その前後には改行が入る要素です。HTMLの構造を表す要素と考えてください。
一方インライン要素は、ブロックレベル要素の内容に意味を持たせる場合に使われる要素で、前後に改行は入りません。画像やリンクは文書構造を表している要素というよりは、HTMLの内容を表す要素なのでインライン要素になるということが分かると思います。
HTML要素の余白の指定をするには
CSSで指定する余白には「margin（マージン）」と「pzdding（パディング）」の2つの種類があります。
marginはその要素の外側の余白で、paddingは要素の枠内の余白を意味しています。まずはそれぞれの違いをよく理解しておきましょう。
実際にmarginとpaddingを使って余白の指定をするには、「余白（margin）」か「枠内余白（padding）」のボックスに数値を入力して指定します。
高さと幅同様、%やpx等のいくつかの単位がありますが、こちらもpxで指定をするほうが、ページ全体のサイズ制御はしやすいです。
また余白の設定は、上側が30pxで下側が10px等、上下左右で別々の設定をすることができます。
