paddingとmarginの関係がよくわからなかったので調べてみました。
とくにmarginの機能がはっきりしなかったので試してみました。
画像でテスト
画像を二つ並べて試してみます。
わかりやすいように枠線をブルーでかきました。
中央の線は左と右の線があるので少し太くなっています。
padding 20px
左の画像に20pxのpaddingをつけました。
下地にオレンジを塗っておいたので、paddingによって出てきました。
画像の大きさは変わらずまわりに余白ができました。
右の画像が下にずれていますが、これはimgの仕様で左の下辺につくようになっているからです。
margin:20px
ここでmargin:20pxを追加してみました。
paddingの外にスペースができました。
右辺は右の画像との間があきました。
右の画像が一段下がりました。
この下がった位置、底辺が左の画像の底辺になります。
赤線の部分です。
これで目には見えませんがmarginが設定されたことがわかります。
指定の仕方
各辺ごとに指定ができるのですが、下のように一括して指定することもできます。
padding、margin両方に共通する指定方法ですが、変わった指定をします。
padding 10px; は上下左右に10pxのスペースを入れるということです。
そしてpadding 10px 10px; とすると上下が10px、左右も10pxということで、上と同じになります。
padding 10px 10px 10px 10px;とすると上下左右とも10pxになります。
このとき、左から時計回りに上、右、下、左となっています。
もっとも不思議なのはpadding 10px 20px 10px;としたときです。
上は10px左右は20px下は10pxという指定になります。
わかりにくいので、参考書を何回も読み返しました。
なれるまでには時間がかかりそうです。
なれるまでには時間がかかりそうです。
