TOP > Dreamweaver上級者への道! > 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での違いはありません。
よっつ指定した場合に「上下左右」の順番だと勘違いする人が多いので気を付けておきましょう。
スポンサードリンク