s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

「margin」と「padding」を完璧に覚えよう【CSS入門・初心者向けまとめ】

初心者の方にとって「マージン」と「パディング」がピンと来ない方も多いのではないでしょうか?実際にプロパティを使って解説しますのでご覧ください。

marginとpaddingは一緒に覚える

「マージン」は「領域間」のスペースで、「パディング」は「領域内」のスペースです。これは「要素」に対して適応されます。要素とは以下の塊のことです。

<開始タグ>内容</終了タグ>

やはりピンと来ないので以下のコードで実際に使用してみましょう

<p style="margin:10px">マージン</p>
<p style="padding:10px">パディング</p>

「margin」を「10px」に設定しました。

マージン

「padding」を「10px」に設定しました。

パディング

さっぱりわかりませんね。では「border」プロパティを追加して「要素」に線を引いてみましょう。

<p style="margin:10px;border:1px dotted #000>マージン</p>
<p style="padding:10px;border:1px dotted #000">パディング</p>

「マージン」は「領域間」のスペースです。

マージン

「パディング」は「領域内」のスペースでしたね。

パディング

これで違いがわかるのではないでしょうか?

marginは「要素の外側の余白」でpaddingは「要素の内側の余白」

簡単にいえばそういうことになります。<div>タグで囲みブロック要素にして視認性をあげてみましょう。

<div style="border:1px solid #000 ">
<p style="margin:10px;padding:10px;border:1px dotted #000 ">要素</p>
</div>

要素

ここから以下のように変えて「margin」を抜きましょう。

<div style="border:1px solid #000 ">
<p style="padding:10px;border:1px dotted #000 ">要素</p>
</div>

「外側の余白」が無くなりましたね。

要素

同じように「padding」を抜いてみましょう。

<div style="border:1px solid #000 ">
<p style="margin:10px;border:1px dotted #000 ">要素</p>
</div>

「内側の余白」が無くなります。

要素

以下のようなイメージを持つと良いでしょう。
【←margin→|←padding→[要素]←padding→|←margin→】

margin

このプロパティはマージンに関する指定を纏めて行うものです。これはショートハンド(短縮形)ですので全てのプロパティを見てみましょう。

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

それぞれのプロパティに値を当てるだけで機能します。

<p style="margin-top:10px;">要素</p>

この場合は「外側の余白で上だけを10px広げる」ということですね。

padding

パディングに関する指定を纏めて行うショートハンド(短縮形)のプロパティです。マージンと全く同じですね。

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

同じくそれぞれのプロパティに値を当てるだけで機能します。

<p style="margin-bottom:10px;">要素</p>

この場合は「内側の余白で下だけを10px広げる」ということですね。

まとめて値を振り分ける

最も覚えづらい部分ですが、「カンマ」で区切り以下の形で使用します。

margin: 値1;
margin: 値1,値2;
margin: 値1,値2,値3;
margin: 値1,値2,値3,値4;

padding: 値1;
padding: 値1,値2;
padding: 値1,値2,値3;
padding: 値1,値2,値3,値4;

値1つで「上下左右」を広げます。
2つの値は「上下」と「左右」
3つの値は「上」「左右」「下」
4つの値は「上」「右」「下」「左」

<p style="margin:10px,5px,10px;">要素</p>

このように指定することで「上」「左右」「下」 それぞれに好みの値をまとめて振ることが可能です。以下のようにする必要がないわけですね。

p{
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

marginだけは「負の値」を指定することが可能

複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるために注意が必要です。