初心者の為のDreamweaver講座!
TOP > Dreamweaver上級者への道! > marginとpaddingの違いって?

*marginとpaddingの違いって?

・margin:外部の余白
・padding:内部の余白

です。もちろん良く分からない人も多いと思いますので、図で書いてみました!

marginとpadding

適用先の領域にmarginを指定すると、外側に余白を作ります。
逆にpaddingを指定すれば、内部に余白が生まれるわけです。

もちろんこんなんじゃ分からないと思いますので、もう一つの図をご覧ください。

marginとpaddingのイメージ

ちょっと図が汚いのは、大目に見てください(笑)
この様にしてみると、marginとpaddingの違いが分かるのではないでしょうか?

marginとpaddingの値の指定ですが、順番通りに

・ひとつだけ指定すると「上下左右」の指定値になります。

margin:10px;

これで上下左右に10px余白が作れます。



・ふたつ指定すると「上下」と「左右」の指定値となります。

margin:10px 15px;

これで上下に10px、左右に15px余白が作れます。



・みっつ指定すると「上」と「左右」と「下」の指定値となります。

margin:10px 15px 10px;

これで上に10px、左右に15px、下に10px余白が作れます。



・よっつ指定すると「上」と「右」と「下」と「左」の指定値となります。

margin:10px 15px 10px 15px;

これで上に10px、右に15px、下に10px、左に15px余白が作れます。



marginとpaddingでの違いはありません。
よっつ指定した場合に「上下左右」の順番だと勘違いする人が多いので気を付けておきましょう。


スポンサードリンク

*メニュー

*スポンサードリンク