CSSの四辺に個別指定する方法！margin-top・padding-rightなどの使い方を初心者向けに徹底解説
生徒
「先生、CSSで余白を設定するときにmarginとかpaddingを使うって聞いたんですが、上下左右それぞれ別に設定できるんですか？」
先生
「はい、もちろんできます！実は、CSSでは上・右・下・左の四辺をそれぞれ個別に指定できるんです。」
生徒
「個別に設定できると、デザインの細かい調整ができそうですね！」
先生
「そうなんです。今日は、margin-topやpadding-rightなどの個別指定の方法を、図と実例でわかりやすく学んでいきましょう！」
1. marginとpaddingの個別指定とは？
margin（マージン）とpadding（パディング）は、どちらも「余白（よはく）」を作るためのCSSプロパティです。marginはボックスの外側、paddingはボックスの内側に空間を作ります。
そして、CSSでは上下左右の余白をそれぞれ個別に指定できます。指定の仕方はとてもシンプルです。
margin-top：上の余白margin-right：右の余白margin-bottom：下の余白margin-left：左の余白padding-top：上の内側の余白padding-right：右の内側の余白padding-bottom：下の内側の余白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のレイアウト作りにおいて、非常に重要なスキルのひとつです。
