HTML - CSS - padding margin 枠内・枠外の間隔

1.　概要

2.　上下左右

1.　概要

　どちらも箱形の要素の枠からの間隔を定義するものですが・・・。
　枠の内側と外側とどっちがどっちだかわからなくなってしまうのです。

　えっと内側が「padding」で、外側が「margin」ですな。


margin:	0;
padding: 0;


　と書けば、外側も内側もぎちぎちってこってす。

　本ページは、下記のサイトを参考にさせていただきました。

「CSS - padding - とほほのWWW入門」


2.　上下左右

　下記のように、上下左右をまとめて書くこともできるのですが。


margin:	 1px 2px 3px 4px;
padding: 5px 6px 7px 8px;


　まとめて書いた場合は、左から順に、「上」「右」「下」「左」の指定になります。
　12時の方向を開始として、時計回りと覚えればいいかと思います。

　しかし、わたしは、これをどうも覚えそこなっちゃってて、いつもわけわからなくなります。
　間違いなくいれるには、下記のように方向まで入れて、それぞれ指定します。


margin-top:	   1px;
margin-right:  2px;
margin-bottom: 3px;
margin-left:   4px;


　これは、面倒なようで、実はわたしには、とても安全です。