キタックCGソリューションセンター

自分で触りたいWeb担のためのTips集

【CSS】marginとpaddingの違い

2022年03月15日(火)

PV 97

CSSの基礎です。余白をとるための「margin(マージン)」と「padding(パディング)」。その違いについてできるだけ簡単に解説します。

marginとpaddingはどちらも余白をとるプロパティ

cssで、余白をとるためのプロパティは2つあります。margin(マージン)とpadding(パディング)です。

なぜ2つあるのか。余白のとり方が違うんですね。これについて、このあと説明します。

その前に使い方の整理

marginもpaddingも、leftとかbottomとかと組み合わせて、どの方向に余白をとるのか指定します。

div.box {
 margin-left : 20px;
 padding-bottom : 50px;
}

上記は、boxというclass名のついたdivに、左側のmarginを20px、下側のpaddingを50px とるよ、という指定です。

ちなみに

div.box {
 margin : 20px;
}

こう書くと、div.boxに対して、上右下左方向にそれぞれ20pxのmarginをとります。

さらに

div.box {
 margin : 20px 30px 10px 40px;
}

これだと、左から順に上margin、右margin、下margin、左margin という指定になります。

CSSのボックスモデルを図解

さて本題。

marginもpaddingも、余白をとるためのプロパティで、役割は似ているんですが、機能は明確に異なります。どの部分に余白をとるか、が異なっています。

CSSには、ボックスモデル、という概念があります。

HTMLのブロック要素、divでもpでもliでもなんでもいいですが、そういう要素は、必ず四角い形をしています。

<div>私は蝶。</div> このdivは、範囲を可視化すると四角なんです。こんな具合に。

<div>私は蝶。</div>

あ、ちょっと角が丸くなっちゃいました。それはこのページのCSSで、border-radiusを指定しているからです、お気になさらず

で、この四角いブロック要素の構成がどうなってるか、というのを見るのがボックスモデルです。

例えばこんな感じになっています。

この図を見ると直感的にわかっていただけると思うのですが、paddingは内側の余白、marginは外側の余白ということになります。

なんの内側、外側か、というと、「borderの」です。borderとは境界線・枠線のことですね。

ちなみに、上のボックスにはグレーの背景色がついていますが、これも内側です。背景色は、borderの内側につきます。

つまり、枠線や背景の中の余白はpadding、その外側の余白はmarginでとりましょう ということです。

補足〜!
要素そのもののサイズは、width(幅)とheight(高さ)というプロパティで指定できるよ。
width(height)→padding→border→margin の順に、要素の範囲は拡がっていくんだね。

Share プリーズ
書き手は私

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

あたたかい感想を書く

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • 佐久間尭