【CSS】要素の余白!marginとpaddingを理解しよう

HTMLは複数の要素によって作成されます。

margin(マージン)は要素の外側の余白を指定する属性で、padding(パディング)は要素自身の内側の余白を指定する属性です。

marginpaddingを指定しない場合だと次のようになります。


.wrapper {
    border: solid 1px orange;
}

.wrapper div {
    background-color: yellow;
    width: 50px;
    height: 50px;
}
    

<div class="wrapper">
    <div>あ</div>
    <div>い</div>
    <div>う</div>
</div>
    

親要素のdiv.wrapperにはオレンジ色の境界線を指定しています。
子要素には3つのdiv要素がありますが、marginpaddingも指定していないので、すべての要素がひっついています。

理解度チェック

  • marginとはどのような属性ですか?
  • paddingとはどのような属性ですか?

marginについて

margin(マージン)は要素の外側の余白を指定する属性です。
指定できる値は【CSS】要素の横幅と高さを指定する方法で説明しているものと同じです。

余白は、左側、上側、右側、下側と4方向に指定することができます。

4方向の余白をそれぞれの属性で指定する

上側の余白を指定する属性がmargin-topです。
右側はmargin-right、下側はmargin-bottom、左側はmargin-leftと、それぞれの方向の余白を指定する属性があります。

margin-top属性の例


.wrapper {
    border: solid 1px orange;
}

.wrapper div {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

.wrapper div:first-child {
    margin-top: 2rem; /* 最初の子要素の上側に余白を指定します。 */
}
    

<div class="wrapper">
    <div>あ</div>
    <div>い</div>
    <div>う</div>
</div>
    

最初の要素にmargin-topを指定したことで上側に2rem分の余白が空いたのがわかると思います。

他の方向の属性も使い方は同じです。結果だけを以下に記しておきます。

margin-right属性の例

右横に要素がないため見た目は変わりません。

margin-bottom属性の例

margin-left属性の例

4方向の余白をmargin属性で指定する

4つの値で指定する

それぞれの方向の余白を一度に指定するmargin属性があります。
margin属性には、スペース区切りで上側右側下側左側の時計回りの順にそれぞれ値を指定することができます。


.wrapper div:first-child {
    margin: 32px 20px 16px 8px;
}
        

上記の様に書くと、上側32px、右側20px、下側16px、左側8pxの余白を指定したことになります。

3つの値で指定する

左右は同じで、上下だけ値を指定する場合は、3つ値を指定します。

margin属性に、スペース区切りで上側左右下側の順にそれぞれ値を指定することができます。


.wrapper div:first-child {
    margin: 32px 20px 16px;
}
        

上記の様に書くと、上側32px、右側20px、下側16px、左側20pxの余白を指定したことになります。

2つの値で指定する

左右は同じ、そして上下も同じ値を指定する場合は、2つの値を指定します。

margin属性に、スペース区切りで上下左右の順に値を指定することができます。


.wrapper div:first-child {
    margin: 32px 16px;
}
        

上記の様に書くと、上側32px、右側16px、下側32px、左側16pxの余白を指定したことになります。

1つの値で指定する

すべての方向に同じ値を指定する場合はmargin属性に1つの値を指定します


.wrapper div:first-child {
    margin: 32px;
}
        

上記の様に書くと、上側32px、右側32px、下側32px、左側32pxの余白を指定したことになります。

autoを使用して水平方向の中央に配置する

marginの左右に値autoを指定すると左右の余白が均等に割り当てられ、要素を中央に揃えることができます。


.wrapper div:first-child {
    margin: 32px auto;
}
        

理解度チェック

  • [margin]要素の上側に余白を2rem空ける場合はどの様に指定しますか?
  • [margin]要素の上下側に余白を2rem、左右側に0.5rem空ける場合はどの様に指定しますか?
  • [margin]要素を水平の中央揃えにする場合はどの様に指定しますか?

paddingについて

padding(パディング)は要素の内側の余白を指定する属性です。
指定できる値は【CSS】要素の横幅と高さを指定する方法で説明しているものと同じです。

marginと同様にpadding属性も、左側、上側、右側、下側と4方向に指定することができます。

4方向の内側余白をそれぞれの属性で指定する

指定の方法はmarginと同じです。

上側の内側余白を指定する属性がpadding-topです。
右内側はpadding-right、下内側はpadding-bottom、左内側はpadding-leftと、それぞれの方向の内側余白を指定する属性があります。

padding-top属性の例


.wrapper {
    border: solid 1px orange;
    padding-top: 2rem; /* 親要素の上内側に余白を指定します。 */
}

.wrapper div {
    background-color: yellow;
    width: 50px;
    height: 50px;
}
    

<div class="wrapper">
    <div>あ</div>
    <div>い</div>
    <div>う</div>
</div>
    

親要素にpadding-topを指定したことでオレンジ色の境界線の内側に2rem分の余白が空いています。
一番目の子要素にmargin-topで指定した場合と見た目は変わりませんが、padding-topはオレンジ色の幅一杯の上内側に余白を作っています。

他の方向の属性も使い方は同じです。marginと同様に結果だけを以下に記しておきます。

padding-right属性の例

右端に要素がないため見た目は変わりません。

padding-bottom属性の例

padding-left属性の例

4方向の内側余白をpadding属性で指定する

4つの値で指定する

paddingにもそれぞれの方向の余白を一度に指定するpadding属性があります。
margin属性と同じく、スペース区切りで上側右側下側左側の時計回りの順にそれぞれ値を指定することができます。


.wrapper {
    border: solid 1px orange;
    padding: 32px 20px 16px 8px;
}
        

上記の様に書くと、上内側32px、右内側20px、下内側16px、左内側8pxの余白を指定したことになります。

3つの値で指定する

左右は同じで、上下だけ値を指定する場合は、3つ値を指定します。

padding属性に、スペース区切りで上内側左右内側下内側の順にそれぞれ値を指定することができます。


.wrapper {
    border: solid 1px orange;
    padding: 32px 20px 16px;
}
        

上記の様に書くと、上内側32px、右内側20px、下内側16px、左内側20pxの余白を指定したことになります。

2つの値で指定する

左右は同じ、そして上下も同じ値を指定する場合は、2つの値を指定します。

padding属性に、スペース区切りで上下内側左右内側の順に値を指定することができます。


.wrapper {
    border: solid 1px orange;
    padding: 32px 16px;
}
        

上記の様に書くと、上内側32px、右内側16px、下内側32px、左内側16pxの余白を指定したことになります。

1つの値で指定する

すべての方向に同じ値を指定する場合はpadding属性に1つの値を指定します


.wrapper {
    border: solid 1px orange;
    padding: 32px;
}
        

上記の様に書くと、上内側32px、右内側32px、下内側32px、左内側32pxの余白を指定したことになります。

理解度チェック

  • [padding]要素の左内側に余白を1rem空ける場合はどの様に指定しますか?
  • [padding]要素の上下内側に余白を1rem、左右内側に2rem空ける場合はどの様に指定しますか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。