模写修行メディア

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

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

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

CSSで余白を作る方法!marginとpaddingについて解説!

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


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

無料教材もあります!

【こんな方におすすめ】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

marginとpaddingの違い

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

プロパティ役割
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

💡 作るデザイン

ケーススタディ1

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

ケーススタディ1

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


💡 paddingとmarginの使い分け

ケーススタディ1
  • 薄い緑の部分が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

💡 作るデザイン

ケーススタディ2

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

ケーススタディ2

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


💡 paddingとmarginの使い分け

ケーススタディ2
  • 薄い緑の部分が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

💡 作るデザイン

ケーススタディ3

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

ケーススタディ3

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


💡 paddingとmarginの使い分け

ケーススタディ3
  • 薄い緑の部分が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

無料教材もあります!👍

模写修行を見る

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

【残り1人】メンターやってます!

👉まずは気軽に聞いてみる

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材