CSS padding margin で余白や間隔をつける

こんにちは。レモンティーです

今回は余白についてです。
使うのはPaddingとMarginです。

これらは共に余白をつくってくれるもので

Paddingは枠の内側の余白で、
Marginは枠の外側の余白です。

言葉より実際に見た方がわかりやすいかもしれません。

いまから↓の二つにPaddingとMarginを順番につけます

TestTest

Padding

TestTest

Margin

TestTest

たしかにPaddingでは枠の内側に余白が
Marginでは外側に余白がそれぞれできていますね。

書き方はこんな感じです。

HTML

いまから↓の二つにPaddingとMarginを順番につけます

<span>Test</span><span>Test</span>

Padding 

<span class="padding">Test</span><span class="padding">Test</span>

Margin

<span class="margin">Test</span><span class="margin">Test</span>

CSS

.padding{padding:10px;}
.margin{margin:10px}


この例では値を一つだけ指定しているので全方向に等しく余白が確保されていますが、二つ以上指定すると以下の方向に適応されます

二つ…上下、左右
三つ…上、左右、下
四つ…上、右、下、左

こちらはPaddingで実際にみてみるとわかりやすいかも

値二つ 5 10(上下5 左右10)


Test


値三つ 5 10 15(上5 左右10 下15)


Test


値四つ 5 10 15 20 (上5 右10 下15 左20)


Test



上のCSSはこうなっています

.p2{padding:5px 10px;}
.p3{padding:5px 10px 15px;}
.p4{padding:5px 10px 15px 20px;}

C#の感覚でコンマで区切ってしまうとうごきません
半角スペースです


これらはborderの時と同じで
margin-top とか padding-leftなどに書き換えれば
特定の方向だけを設定できます

  • top
  • left
  • right
  • bottom

などがあります。


今回はこれでおしまいです。
sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com