模写修行メディア

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

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

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

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

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

コーディング教材作りました 🎉

こんな方におすすめです。

  • コーダー・フロントエンドエンジニアを目指している
  • 基礎学習を終えて実践的な"練習"がしたい
  • XDのデータを見ながらコーディングの練習をしたい
  • プロのコードを見たい
  • 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を使った書き方を学びたい

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

他の書籍や教材との違いは、学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。

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

無料教材もあります!👍

模写修行を見る

脱初心者!模写修行でプロになるための練習を!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

\Share/

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

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