CSSのmargin・padding一括指定の使い方を完全ガイド！初心者でもわかる設定ルール

一括指定の書き方（margin: 10px 20px; などのルール）

先生と生徒の会話形式で理解しよう

生徒

「先生、前回はmargin-topやpadding-leftみたいに、四辺を個別に指定する方法を学びましたよね？」

先生

「そうですね。上下左右をそれぞれ指定して、細かくレイアウトを調整できました。」

生徒

「でも、四つも書くのはちょっと面倒かも…。もっと簡単に書ける方法ってありますか？」

先生

「あります！CSSには一括指定という便利な書き方があるんです。今日はそのルールをわかりやすく解説していきましょう。」

1. marginやpaddingの一括指定とは？

CSSの「一括指定（ショートハンド）」とは、本来なら上下左右の4か所を別々に記述しなければならない余白の設定を、たった1行のコードでまとめて指定する非常に便利なテクニックです。プログラミング初心者の方が最初につまずきやすい「コードの読みづらさ」を解消し、スッキリとした美しいソースコードを書くための第一歩となります。

例えば、margin-top（上）、margin-right（右）、margin-bottom（下）、margin-left（左）と4行かけて書いていたものを、marginというプロパティ1つだけで完結させることができます。これはpadding（内側の余白）でも全く同じ仕組みが使えます。

まずは、実際の記述例を見てみましょう。以下のサンプルでは、ボックスの外側（margin）と内側（padding）をそれぞれ一括指定で設定しています。


<style>
.sample-box {
    /* 上下10px、左右20pxの「外側」余白 */
    margin: 10px 20px;
    /* 上下5px、左右15pxの「内側」余白 */
    padding: 5px 15px;
    border: 2px solid #007bff;
    background-color: #f0f8ff;
    display: inline-block;
}
</style>

<div class="sample-box">
    一括指定ならコードがこんなにシンプル！
</div>

ブラウザ表示

このコードでは、1つ目の値が「上下」、2つ目の値が「左右」を意味しています。このように数値を半角スペースで区切って並べるだけで、ブラウザが自動的に「あ、これは上下と左右をまとめて設定したいんだな」と解釈してくれます。

一括指定をマスターするメリットは、単にタイピングの手間が減るだけではありません。「コード全体の行数が減ることで、後からデザインを修正する際にどこを直せばいいか一目でわかるようになる」という点にあります。Web制作の現場では、この効率化が非常に重要視されています。

2. 値の数による指定ルールを理解しよう

CSSの一括指定には、値をいくつ書くかによって意味が変わるルールがあります。ここでは、その書き方をわかりやすく紹介します。

① 値を1つだけ指定した場合

1つだけ書くと、すべての方向（上・右・下・左）に同じ値が適用されます。


<style>
.box1 {
    margin: 20px;
    background-color: lightblue;
}
</style>

<div class="box1">上下左右すべて20pxの余白</div>

ブラウザ表示

このように、1つ指定すると4辺すべてが同じ幅になります。

② 値を2つ指定した場合

2つ指定したときは、1つ目が「上下（top・bottom）」、2つ目が「左右（right・left）」の値になります。


<style>
.box2 {
    margin: 30px 60px;
    background-color: lightgreen;
}
</style>

<div class="box2">上下30px、左右60pxの余白</div>

ブラウザ表示

これが一番よく使われる書き方です。横方向だけを広くしたいときなどに便利です。

③ 値を3つ指定した場合

3つの場合は、「上」「左右」「下」の順番で指定します。


<style>
.box3 {
    padding: 10px 30px 20px;
    background-color: pink;
}
</style>

<div class="box3">上10px、左右30px、下20pxの内側余白</div>

ブラウザ表示

この書き方では、左右の値は同じになります。上と下を変えたいけれど、左右はそろえたいときに便利です。

④ 値を4つ指定した場合

4つすべて指定した場合は、「上」「右」「下」「左」の順番になります。時計回りの順番と覚えましょう。


<style>
.box4 {
    margin: 10px 20px 30px 40px;
    background-color: lightyellow;
}
</style>

<div class="box4">上10px、右20px、下30px、左40pxの余白</div>

ブラウザ表示

このルールを覚えると、個別指定よりも短く、正確に余白を設定できるようになります。

3. border（境界線）と一緒に使うときのポイント

実際のWebデザインでは、margin・padding・borderを組み合わせて使う場面が多いです。ボックスの位置や見た目を整えるときに、この3つのバランスがとても重要です。


<style>
.box-border {
    border: 3px solid red;
    margin: 20px 40px;
    padding: 10px 30px;
    background-color: #ffeaea;
}
</style>

<div class="box-border">margin・padding・borderを一括指定で使った例</div>

ブラウザ表示

marginで外側のスペースを作り、paddingで内側に余白を設け、borderで囲むと、ボックスの形がはっきりして見やすくなります。

こうした使い方は、ボタン・カード・記事枠など、あらゆる場面で活用されます。

4. 一括指定を使うメリット

一括指定の最大のメリットは、コードが短くなることです。たとえば、次のような2つのコードを比べてみましょう。


<style>
/* 個別指定の場合 */
.box-a {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* 一括指定の場合 */
.box-b {
    margin: 10px 20px;
}
</style>

結果は同じでも、上のように書くより下のようにまとめて書くほうがスッキリしています。修正するときも、一行変えるだけで済むので管理がラクになります。

特に、Webサイト全体のデザインを統一するときは、一括指定を使うことで効率的にスタイルを調整できます。

5. 実践！デザインでの使いどころ

最後に、実際のWebデザインで一括指定が使われる例を紹介します。ボタンやカード、見出しなどの余白を整えるときによく登場します。


<style>
.button {
    background-color: orange;
    color: white;
    border: none;
    padding: 10px 25px;
    margin: 15px 10px;
    border-radius: 5px;
}
</style>

<button class="button">ボタンA</button>
<button class="button">ボタンB</button>

ブラウザ表示

このように一括指定を使うと、余白の調整が簡単になり、全体のデザインバランスも取りやすくなります。ボタンの内側のスペース（padding）と外側のスペース（margin）を両方調整することで、見た目が整い、クリックしやすいレイアウトになります。

2026年最新スキルアップ・実践セミナー