marginとpaddingの違い 〜CSS〜
marginとpaddingの違い 〜CSS〜
marginとpaddingは、余白の指定をすることです。
どのような違いがあるのでしょう。
1.marginとpaddingの違い
- margin：要素の外側の余白
- padding：要素の内側の余白
※要素とは？
要素というのは、＜タグ＞〜＜/タグ＞の固まりを表します。
たとえば、＜p＞これは要素です。＜/p＞は１つの要素です。
この固まりを要素と呼びます。
2.marginの書き方
- 上にスペースをあける。
- 下にスペースをあける。
- 右にスペースをあける。
- 左にスペースをあける。
- 上下左右にスペースをあける。
- 上下に同じスペース、左右に同じスペースをあける。
- 左右は同じスペースで、上と下は違うスペースをあける。
- 上下左右、あけるスペースの値が違う場合。
- 上にスペースをあける。
- 下にスペースをあける。
- 右にスペースをあける。
- 左にスペースをあける。
- 上下左右にスペースをあける。
- 上下に同じスペース、左右に同じスペースをあける。
- 左右は同じスペースで、上と下は違うスペースをあける。
- 上下左右、あけるスペースの値が違う場合。
margin-top:30px; （上に30pxスペースをあける。）
margin-top:50px; （上に50pxスペースをあける。）
margin-bottom:30px; （下に30pxスペースをあける。）
margin-bottom:50px; （下に50pxスペースをあける。）
margin-left:30px; （右に30pxスペースをあける。）
margin-left:50px; （右に50pxスペースをあける。）
margin-right:30px; （左に30pxスペースをあける。）
margin-right:50px; （左に50pxスペースをあける。）
margin:30px; （上下左右に30pxスペースをあける。）
margin:50px; （上下左右に50pxスペースをあける。）
margin:10px 50px 80px; （上に10px、左右に50px、下に80pxスペースをあける。）
margin:10px 30px; （上下に10px、左右に30pxスペースをあける。）
margin:20px 50px; （上下に20px,左右に50pxスペースをあける。）
margin:10px 20px 30px 40px;
（上に10px、右に20px、下に30px、左に30pxスペースをあける。）
※上から、時計回り。
3.paddingの書き方
☆paddingのと同じ
padding-top:30px; （上に30pxスペースをあける。）
padding-top:50px; （上に50pxスペースをあける。）
padding-bottom:30px; （下に30pxスペースをあける。）
padding-bottom:50px; （下に50pxスペースをあける。）
padding-left:30px; （右に30pxスペースをあける。）
padding-left:50px; （右に50pxスペースをあける。）
padding-right:30px; （左に30pxスペースをあける。）
padding-right:50px; （左に50pxスペースをあける。）
padding:30px; （上下左右に30pxスペースをあける。）
padding:50px; （上下左右に50pxスペースをあける。）
padding:10px 50px 80px; （上に10px、左右に50px、下に80pxスペースをあける。）
padding:10px 30px; （上下に10px、左右に30pxスペースをあける。）
padding:20px 50px; （上下に20px,左右に50pxスペースをあける。）
padding:10px 20px 30px 40px;
（上に10px、右に20px、下に30px、左に30pxスペースをあける。）
※上から、時計回り。