HTMLは複数の要素によって作成されます。
margin
(マージン)は要素の外側の余白を指定する属性で、padding
(パディング)は要素自身の内側の余白を指定する属性です。
margin
やpadding
を指定しない場合だと次のようになります。
.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
要素がありますが、margin
もpadding
も指定していないので、すべての要素がひっついています。
理解度チェック
margin
とはどのような属性ですか?padding
とはどのような属性ですか?
margin
について
margin
(マージン)は要素の外側の余白を指定する属性です。
指定できる値は【CSS】要素の横幅と高さを指定する方法で説明しているものと同じです。
余白は、左側、上側、右側、下側と4方向に指定することができます。
-
margin
属性の縦方向(上下)はdisplay: inline;
であるインライン要素には反映されません。
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;
}
-
縦方向に
auto
を指定すると値0となり余白はなくなります。
理解度チェック
- [
margin
]要素の上側に余白を2rem
空ける場合はどの様に指定しますか? - [
margin
]要素の上下側に余白を2rem
、左右側に0.5rem
空ける場合はどの様に指定しますか? - [
margin
]要素を水平の中央揃えにする場合はどの様に指定しますか?
padding
について
padding
(パディング)は要素の内側の余白を指定する属性です。
指定できる値は【CSS】要素の横幅と高さを指定する方法で説明しているものと同じです。
margin
と同様にpadding
属性も、左側、上側、右側、下側と4方向に指定することができます。
-
margin
は外側、padding
は内側の余白を指定します。
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
の余白を指定したことになります。
-
margin
と異なりpadding
にはauto
を指定することができません。
理解度チェック
- [
padding
]要素の左内側に余白を1rem
空ける場合はどの様に指定しますか? - [
padding
]要素の上下内側に余白を1rem
、左右内側に2rem
空ける場合はどの様に指定しますか?