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

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

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

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

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

作るデザイン

独立したパーツに分ける

この独立したパーツ間の余白は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の使い分けについて記事なので、細かい部分は省略しています。

カラクリ無しの完全無料！あなた専属のメンターが付く？