CSSの四辺に個別指定する方法！margin-top・padding-rightなどの使い方を初心者向けに徹底解説

四辺に個別指定する方法（margin-top・padding-right など）

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

生徒

「先生、CSSで余白を設定するときにmarginとかpaddingを使うって聞いたんですが、上下左右それぞれ別に設定できるんですか？」

先生

「はい、もちろんできます！実は、CSSでは上・右・下・左の四辺をそれぞれ個別に指定できるんです。」

生徒

「個別に設定できると、デザインの細かい調整ができそうですね！」

先生

「そうなんです。今日は、margin-topやpadding-rightなどの個別指定の方法を、図と実例でわかりやすく学んでいきましょう！」

1. marginとpaddingの個別指定とは？違いを初心者向けに解説

CSSでレイアウトを整える際、最も頻繁に使うのがmargin（マージン）とpadding（パディング）です。どちらも「余白」を作るプロパティですが、役割がはっきりと分かれています。

margin：要素の「外側」の余白。隣の要素や画面の端との距離を調整します。
padding：要素の「内側」の余白。枠線（border）から中身の文字までの距離を調整します。

Webデザインでは「上だけ広げたい」「左だけ詰めたい」という場面が多いため、CSSでは上下左右の四辺を個別に指定する仕組みが用意されています。指定に使用するプロパティ名は、基本の単語にハイフンと方向（top, right, bottom, left）を組み合わせるだけなので、英語の方向感覚で直感的に理解できます。

方向	margin（外側の余白）	padding（内側の余白）
上（Top）	`margin-top`	`padding-top`
右（Right）	`margin-right`	`padding-right`
下（Bottom）	`margin-bottom`	`padding-bottom`
左（Left）	`margin-left`	`padding-left`

まずは、プログラミング未経験の方でも分かりやすいように、実際に「上だけ」や「左だけ」の余白を変えるとどう見えるか、簡単なサンプルコードで確認してみましょう。


<style>
    .base-box {
        background-color: #f0f0f0;
        border: 2px solid #333;
        display: inline-block;
    }

    .custom-spacing {
        /* 上の外側に30pxの隙間を作る */
        margin-top: 30px;
        /* 左の内側に50pxの広いスペースを作る */
        padding-left: 50px;
        background-color: #ffeb3b;
    }
</style>

<div class="base-box">
    通常のボックス
</div>

<div class="base-box custom-spacing">
    個別指定したボックス
</div>

ブラウザ表示

このコードでは、2つ目のボックスにだけmargin-topで上の隙間を、padding-leftで左側の内余白を作っています。このように個別指定を使いこなすと、文字が枠線にピタッとくっついて見づらくなるのを防いだり、ボタン同士がくっつきすぎるのを解消したりと、プロ級の細やかなデザイン調整が可能になります。

2. marginの四辺を個別に指定してみよう

次の例では、上・右・下・左それぞれのマージンを別々に指定しています。


<style>
.box-margin {
    background-color: lightblue;
    border: 2px solid blue;
    margin-top: 30px;
    margin-right: 50px;
    margin-bottom: 20px;
    margin-left: 10px;
}
</style>

<div class="box-margin">marginを四辺に個別指定しています。</div>

ブラウザ表示

この例では、上の余白が30px、右が50px、下が20px、左が10pxです。つまり、要素の周りにある「外側のスペース（margin）」がそれぞれ違う幅になります。

3. paddingの四辺を個別に指定してみよう

次は、ボックスの内側の余白（padding）を個別に設定してみましょう。paddingは、文字や画像などの中身と枠線との間にできる空間です。


<style>
.box-padding {
    background-color: lightgreen;
    border: 2px solid green;
    padding-top: 40px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 50px;
}
</style>

<div class="box-padding">paddingを四辺に個別指定しています。</div>

ブラウザ表示

上記のコードでは、ボックスの内側で、文字の上に40px、右に10px、下に20px、左に50pxの空間ができます。paddingを変えることで、ボックス内の文字位置を調整することができます。

4. marginとpaddingを組み合わせてみよう

次は、marginとpaddingの両方を個別指定して使ってみましょう。


<style>
.box-both {
    background-color: pink;
    border: 3px solid red;
    margin-top: 40px;
    margin-left: 30px;
    padding-top: 20px;
    padding-right: 50px;
}
</style>

<div class="box-both">marginとpaddingを個別に設定しています。</div>

ブラウザ表示

このように、marginで要素同士の距離を調整し、paddingで中身の見やすさを調整するのが基本です。四辺を別々に設定することで、より細かくデザインを整えることができます。

5. 各方向の指定を覚えよう（図でイメージ）

marginやpaddingの方向を覚えるコツは、「時計回り」で考えることです。

top（トップ）：上
right（ライト）：右
bottom（ボトム）：下
left（レフト）：左

たとえば、「margin-top」は上の余白を作るプロパティです。もしボックスの上だけスペースを作りたいなら、「margin-top: 20px;」と書きます。

覚え方のコツとしては、topが上、rightが右、bottomが下、leftが左という順番を、頭の中で時計回りに思い浮かべるとわかりやすいです。

6. 実際のWebデザインでの使い方のコツ

Webサイトのデザインでは、「上だけ余白を取りたい」「左に少し余裕を持たせたい」といった場面がよくあります。そのときに個別指定のプロパティを使います。

例えば、次のようなボタンデザインでは、ボタン同士の間を開けたい場合にmargin-rightを使います。


<style>
button {
    background-color: orange;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 15px;
}
</style>

<button>ボタン1</button>
<button>ボタン2</button>

ブラウザ表示

このようにmargin-rightを使うことで、ボタンの右側にだけスペースを作り、見た目のバランスを整えることができます。

7. 四辺の指定を使いこなしてデザインを整えよう

個別指定を使えるようになると、Webページのレイアウトを細かくコントロールできます。特に、段落（pタグ）や見出し（h1タグなど）の上下余白を調整するのに便利です。


<style>
h2 {
    margin-top: 40px;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 5px solid blue;
}
</style>

<h2>個別指定で見出しを整える例</h2>
<p>このように、余白を調整するだけでデザインの印象が大きく変わります。</p>

ブラウザ表示

このようにmarginとpaddingを四辺に個別指定できるようになると、文字の位置、ボックス間の距離、デザインの整え方が格段に上達します。CSSのレイアウト作りにおいて、非常に重要なスキルのひとつです。

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