- 1. 概要
- 2. 上下左右
- 3. 省略
- 4. 参考サイト
1. 概要
どちらも箱形の要素の枠からの間隔を定義するものですが・・・。
枠の内側と外側とどっちがどっちだかわからなくなってしまうのです。
えっと内側が「padding」で、外側が「margin」ですな。
margin: 0;
padding: 0;
と書けば、外側も内側もぎちぎちってこってす。
2. 上下左右
下記のように、上下左右をまとめて書くこともできるのですが。
margin: 1px 2px 3px 4px;
padding: 5px 6px 7px 8px;
まとめて書いた場合は、左から順に、「上」「右」「下」「左」の指定になります。
12時の方向を開始として、時計回りと覚えればいいかと思います。
しかし、わたしは、これをどうも覚えそこなっちゃってて、いつもわけわからなくなります。
間違いなくいれるには、下記のように方向まで入れて、それぞれ指定します。
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
これは、面倒なようで、実はわたしには、とても安全です。
3. 省略
よく、4つ書かずに、省略していたりしますな。
これがよく覚えられない。
1つしかなければ、上下左右を指定することになります。
margin: 10px;
2つの場合は、上下セット、左右セットの順になります。
下記の場合、上下が「10px」左右が「20px」になります。
margin: 10px, 20px;
3つの場合は、上、左右セット、下になります。
下記の場合、上が「10px」左右が「20px」下が「30px」になります。
margin: 10px, 20px, 30px;
4. 参考サイト
本ページは、下記のサイトを参考にさせていただきました。
「CSS - padding - とほほのWWW入門」
|
|
