paddingとmarginの使い分けをサンプルを使って解説！

初学者の方にとって、paddingとmarginの使い分けは、特に難しく感じるポイントです。言葉で説明されても、実際にコードを書いてみると、迷うケースもあると思います。

この記事では、具体的なサンプルを使って、ケーススタディとして、paddingとmarginの使い分けついて解説します。

marginとpaddingの基礎については、上の記事で解説しています。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

marginとpaddingの違い

冒頭で紹介した記事でも解説していますが、大事なことなので、再度違いと役割について記載しておきます。

どちらも余白を作るプロパティです。違いは、上の表のようになります。

ボックスモデル

HTMLに書いた要素は上のようなボックスを作ります。これをボックスモデルと呼びます。

<p>親譲りの無鉄砲で小供の時から損ばかり…</p>

例えば、上のコードであればpタグの中身が、contentsになります。その外側にpadding → border → marginがあります。

• borderまでがその要素
• marginは要素の外側

上の点に注意です。このことから、paddingは内側の余白で、marginは外側の余白になることがわかります。

marginとpaddingの使い分けのポイント

• 背景やボーダーを入れたときにどうなるか
• 独立したパーツ間の余白かどうか

この2点に注目すると、どちらを使えば良いかスムーズに決めることができます。

これ以降、具体的なサンプルを使って、marginとpaddingの使い分けを紹介します。絶対の正解ではありませんが、参考にしてみてください。

paddingとmarginの使い分けをサンプルを使って解説！

FlexboxやCSS Gridなどは使わずに済む、簡単な例で解説します。

ケーススタディ1

💡 作るデザイン

💡 独立したパーツに分ける

この独立したパーツ間の余白はmarginで空けます。

💡 paddingとmarginの使い分け

• 薄い緑の部分がpadding
• 薄いオレンジの部分がmargin

タイトルの左側の線はborderで入れます。

💡 コード

<h2 class="title">marginとpaddingの使い分けのポイント</h2>
<p class="text">親譲りの無鉄砲で小供の時から…</p>

.title{
    ...
    border-left: 10px solid rgb(197, 171, 95);
    padding: 10px;
}

.text{
    ...
    margin-top: 20px;
}

※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。

ケーススタディ2

💡 作るデザイン

💡 独立したパーツに分ける

この独立したパーツ間の余白はmarginで空けます。

💡 paddingとmarginの使い分け

• 薄い緑の部分がpadding
• 薄いオレンジの部分がmargin

💡 コード

<section class="post">
    <span class="post-category">HTML・CSS</span>
    <div class="post-img">
        <img src="..." alt="..." width="..." height="...">
    </div>
    <span class="post-date">2021-09-02</span>
    <h2 class="post-title">paddingとmarginの使い分けをサンプルを使って解説！</h2>
</section>

.post-category{
    ...
    display: inline-block;
    padding: 8px;
}

.post-img{
    ...
    margin-top: 10px;
}

.post-date{
    ...
    display: inline-block;
    margin-top: 10px;
}

.post-title{
    ...
    margin-top: 10px;
}

spanタグはデフォルトでmarginが効かないので、display: inline-block;を入れています。

※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。

ケーススタディ3

💡 作るデザイン

💡 独立したパーツに分ける

この独立したパーツ間の余白はmarginで空けます。

💡 paddingとmarginの使い分け

• 薄い緑の部分がpadding
• 薄いオレンジの部分がmargin

💡 コード

<section class="section section--about">
    <span class="title-en">About</span>
    <h2 class="title-ja">私たちについて</h2>
    <p class="text">親譲りの無鉄砲で小供の時から…</p>
</section>
<section class="section section--service">
    <span class="title-en">Service</span>
    <h2 class="title-ja">サービス</h2>
    <p class="text">親譲りの無鉄砲で小供の時から…</p>
</section>

.section{
    padding: 80px 0;
}
.section--about{ background-color: #fff; }
.section--service{ background-color: #eee; }

.title-en{
    ...
}

.title-ja{
    ...
    margin-top: 8px;
}

.text{
    ...
    margin-top: 16px;
}

※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！