余白
余白といっても、要素の内側と外側の2種類あるっぽいです。margin: --;
要素の外側の余白を設定します。| ----- --- |
margin-right:30px; → |
----- ---- |
|---|
margin-right: 30pxと設定して、要素の右側に30pxの余白を開けました。
管理人は普段から枠線ばっかり使ってるので
「枠線の外側の余白」
というイメージがあるのですが、これが要素の外側の余白です。
padding: --;
お次は要素の内側の余白。同じように試してみたいと思います。
| ----- --- |
padding: 4px; → |
----- ----- |
|---|
さっきのような要素間の余白はありませんが、要素の内側にある--に、一定の隙間ができました。
これが要素の内側の余白。
ちなみに、
margin, padding共に、左右等の指定をしない場合は上下左右全てに適応されます。
これは「文字装飾」で紹介したborderと同じです。
ちなみにこれ、四方を一気に設定する場合は
margin: 1px 2px 3px 4px;
なんて感じに記述することができます。
値は左から「上右下左」と時計回りになっています。
margin: 2px auto;
こうすると、上下に2px、左右は均等になります。中央寄せにしたいときは便利。