2020.10.16  2021.04.04

CSS marginとpaddingの違いを分かりやすく説明

こんにちは!マコブログです!

今回は、駆け出しプログラマーが躓きやすい、marginとpaddingの違いについてご説明していきたいと思います。

marginとpaddingの違いを理解することで、様々なレイアウトの実装が可能になります。

それでは実際にたとえ話をしながら考えていきましょう。



※前提として、自分は<div>というブロックレベル要素だと想像してみてください。

marginとは

marginとは、基本的にブロック要素に適用でき、要素の外側の領域を指定することができます。
ブロック要素って何?という方はこちらをチェック↓↓↓
ブロックレベル要素

まず、あなたは今長い棒を持っているとしましょう。

そして、それを自分を中心に持って回転します。

すると、周りの人は棒が危なくてあなたに近づけませんよね。

この棒を振り回している自分と相手の空間がmarginです。

paddingとは

paddingとは、内側の領域の事です。
こちらも基本的にブロック要素に適用でき、背景などの指定領域に含まれます。

これは先ほどの例だと自分自身の幅という意味合いになります。

棒を振り回していなければ、周りの人は自分のすぐ近くまで来れますが、自分の中までは入ってこれませんよね…(笑)



そう、この自分の中身がpaddingなのです。

つまり、CSSで背景の領域を広げたいときは、paddingを増やせば背景が拡大し、marginを増やせば他の要素が遠ざかるということです!

まとめ

いかがでしたでしょうか?

今回は、marginとpaddingの違いについて、簡単なたとえ話を用いて分かりやすく説明してみました!

この記事を読んでmarginとpaddingの違いが分からないといった方の助けになればと思います!

こちらの記事も是非チェックしてみてください↓
ブログ開設から1カ月以内にグーグルアドセンスの審査に合格した話

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →