marginとpaddingの違い 〜CSS〜
marginとpaddingの違い 〜CSS〜
marginとpaddingは、余白の指定をすることです。
どのような違いがあるのでしょう。
1.marginとpaddingの違い
- margin:要素の外側の余白
- padding:要素の内側の余白
※要素とは?
要素というのは、<タグ>〜</タグ>の固まりを表します。
たとえば、<p>これは要素です。</p>は1つの要素です。
この固まりを要素と呼びます。
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スペースをあける。)
※上から、時計回り。
ディスカッション
コメント一覧
まだ、コメントがありません