CSSでボックスの内側と外側に余白を指定するマージンとパディング

スタイルシートのを勉強中の、あきら(@akrwnet)です(^v^)

画像を使用しないで引用表示するCSSカスタマイズをしているときに、ボックスの余白部分がいまいち気に入らなかったので、margin(マージン)と、padding(パディング)を編集してみました。

何かと使う記述なので、書き留めておこうかと思います。

マージンは、ボックス外側の余白を指定するプロパティで、パディングは、ボックス内側の余白を指定するプロパティになります。

記述の仕方はどちらも変わらないので、マージンが外側、パディングが内側と覚えておけばOK

スポンサーリンク

余白を一括で指定する

余白部分は、一行の記述だけで上下左右を一括で指定することができます。

上下左右を全部統一する場合はこれだけでOK
margin: 2px;
padding: 2px;

上下と左右の幅を変えたい場合は、margin: 上下px 左右px;
margin: 2px 4px;
padding: 2px; 4px;

上と左右と下をそれぞれ変えたい場合は、margin: 上px 左右px 下px;
margin: 2px 4px 6px;
padding: 2px4px 6px;

上・右・下・左と別々に指定したい時には、margin: 上px 右px 下px 左px;
margin: 2px 4px 6px 8px;
padding: 2px 4px 6px 8px;

どこがどの部分なのか、はじめは迷うかもしれませんが、上からの時計回りで指定していると思えば良いかもしれません。

個別に指定する記述方法

一行で指定する一括のほうが楽かもしれませんが、パッと見でわかりやすい個別指定もできます。

その場合には、 - と top、right、bottom、left 付け加えて記述

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;


padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

指定しない場合の値は0になります。

padding-top: 5px;
padding-bottom: 15px;

このように、right や left を指定しなかった場合には、左右の値が0ということです。

  【参考記事】
スタイルシート[CSS]/ボックス – TAG index Webサイト

ではまた(^‐^)ゝ 

freefont_logo_mofuji (1)

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする