余白 margin padding

margin : サイズ ;　ボックスの外側の余白

padding : サイズ ;　ボックスの内側の余白

ボックスの余白を指定します。

サイズは　px　%　で指定します。

margin : 5px ;　/*上下左右に5px指定*/

margin : 5px 10px ;　/*上下に5px、左右に10px指定*/

margin : 5px 10px 15px ;　/*上に5px、左右に10px、下に15px指定*/

margin : 5px 10px 15px 20px ;　/*上に5px、右に10px、下に15px、左に20px指定*/

margin-top : 5px ;　/*上に5px指定*/

margin-bottom : 5px ;　/*下に5px指定*/

margin-left : 5px ;　/*左に5px指定*/

margin-right : 5px ;　/*右に5px指定*/

margin : auto ;　/*自動指定*/

paddingの指定も同じです。

黒枠を親ボックスとします。

<div>文字</div>

とmarginもpaddingも指定せずに書き込むと

文字

このようになります。

marginを5px、paddingを10px指定してみると

文字

このようになります。

どのように指定されているかdivの枠を出してみます。

文字

文字

このように赤枠の外側の余白がmargin

赤枠の内側の余白がpadding

解かりやすいよう、<div>文字</div>を二つ重ねてみました。

margin　と　padding　は、セットで覚え使い分けるとカスタマイズしやすいです。