模写修行メディア

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

marginとpaddingの違い

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

プロパティ役割
margin外側の余白
padding内側の余白

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

ボックスモデル

ボックスモデル

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

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

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

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

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

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

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

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

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

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

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の使い分けについて記事なので、細かい部分は省略しています。

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材