もくじ
要素のmarginとpaddingとは
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;であるインライン要素には反映されません。
４方向の余白をそれぞれの属性で指定する
上側の余白を指定する属性が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属性の例
４方向の余白をmargin属性で指定する
４つの値で指定する
それぞれの方向の余白を一度に指定するmargin属性があります。margin属性には、スペース区切りで上側、右側、下側、左側の時計回りの順にそれぞれ値を指定することができます。
.wrapper div:first-child {
margin: 32px 20px 16px 8px;
}
上記の様に書くと、上側32px、右側20px、下側16px、左側8pxの余白を指定したことになります。
３つの値で指定する
左右は同じで、上下だけ値を指定する場合は、３つ値を指定します。
margin属性に、スペース区切りで上側、左右、下側の順にそれぞれ値を指定することができます。
.wrapper div:first-child {
margin: 32px 20px 16px;
}
上記の様に書くと、上側32px、右側20px、下側16px、左側20pxの余白を指定したことになります。
２つの値で指定する
左右は同じ、そして上下も同じ値を指定する場合は、２つの値を指定します。
margin属性に、スペース区切りで上下、左右の順に値を指定することができます。
.wrapper div:first-child {
margin: 32px 16px;
}
上記の様に書くと、上側32px、右側16px、下側32px、左側16pxの余白を指定したことになります。
１つの値で指定する
すべての方向に同じ値を指定する場合はmargin属性に１つの値を指定します。
.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は内側の余白を指定します。
４方向の内側余白をそれぞれの属性で指定する
指定の方法は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属性の例
４方向の内側余白をpadding属性で指定する
４つの値で指定する
paddingにもそれぞれの方向の余白を一度に指定するpadding属性があります。margin属性と同じく、スペース区切りで上側、右側、下側、左側の時計回りの順にそれぞれ値を指定することができます。
.wrapper {
border: solid 1px orange;
padding: 32px 20px 16px 8px;
}
上記の様に書くと、上内側32px、右内側20px、下内側16px、左内側8pxの余白を指定したことになります。
３つの値で指定する
左右は同じで、上下だけ値を指定する場合は、３つ値を指定します。
padding属性に、スペース区切りで上内側、左右内側、下内側の順にそれぞれ値を指定することができます。
.wrapper {
border: solid 1px orange;
padding: 32px 20px 16px;
}
上記の様に書くと、上内側32px、右内側20px、下内側16px、左内側20pxの余白を指定したことになります。
２つの値で指定する
左右は同じ、そして上下も同じ値を指定する場合は、２つの値を指定します。
padding属性に、スペース区切りで上下内側、左右内側の順に値を指定することができます。
.wrapper {
border: solid 1px orange;
padding: 32px 16px;
}
上記の様に書くと、上内側32px、右内側16px、下内側32px、左内側16pxの余白を指定したことになります。
１つの値で指定する
すべての方向に同じ値を指定する場合はpadding属性に１つの値を指定します。
.wrapper {
border: solid 1px orange;
padding: 32px;
}
上記の様に書くと、上内側32px、右内側32px、下内側32px、左内側32pxの余白を指定したことになります。
-
marginと異なりpaddingにはautoを指定することができません。
理解度チェック
- [
padding]要素の左内側に余白を1rem空ける場合はどの様に指定しますか？ - [
padding]要素の上下内側に余白を1rem、左右内側に2rem空ける場合はどの様に指定しますか？