
WEBサイトをコーディングする際に、paddingとmarginをいつも各方向をいっぺんに設定する時に止まってしまうため、
確認・まとめの意味も込めて今回paddingとmarginについて書き込んでいきたいと思います。
paddingについて
- borderの内側の余白
- paddingとはテキストの背景と同様に、背景色がつく余白
- paddingとはaタグと同様に、リンクになりうる余白
padding一括設定方法
padding:[上下左右]; padding:[上下] [左右]; padding:[上] [左右] [下]; padding:[上] [右] [下] [左];
padding各方向の設定方法
padding-top:[上]px; padding-right:[右]px; padding-left:[左]px; padding-bottom:[下]px;
box-sizingにおいてのpaddingとborderの扱い
box-sizingを下記のように設定すると、paddingとborderの扱いが変化する。
box-sizing:content-box;
box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
初期状態ではcontent-boxとなっており、boaderとpaddingをwidthとheightに含めない、通常状態
box-sizing:border-box;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
border-boxと設定すると、boaderとpaddingをwidthとheightに含める、レスポンシブルデザインなどのwidthとheightを%で設定する時に、IE8以上のブラウザで便利である。
box-sizing:inherit;
box-sizing:inherit; -moz-box-sizing:inherit; -webkit-box-sizing:inherit;
親要素の値を継承する。具体的に言うと、親のdivに設定されているbox-sizingを継承するために、設定する。
ここで注意が必要なのが、marginは要素に含まれないということである。
参考情報
参考情報としてwidthを%で設定する時に、下記を利用するとさらに便利である。
width : 98% ; /* IE8以下とAndroid4.3以下用 */ width : -webkit-calc(100% - 20px) ; width : -moz-calc(100% - 20px) ; width : calc(100% - 20px) ;
「calc」とはCSS3において、計算を可能にしてくれるものです。
marginについて
- borderの外側の余白
- marginとはテキストの背景と別に、背景色がつかない余白
- marginとはaタグと別に、リンクになりえない余白
margin一括設定方法
margin:[上下左右]; margin:[上下] [左右]; margin:[上] [左右] [下]; margin:[上] [右] [下] [左];
margin各方向の設定方法
margin-top:[上]px; margin-right:[右]px; margin-left:[左]px; margin-bottom:[下]px;
marginの相殺
marginは縦方向(垂直方向)に限り、重なるmarginを相殺する。
上下にdivのボックスがあるとして、縦方向(垂直方向)において
下:20px + 上:20px は 40px ではなく、20pxとなる。
下:20px + 上:60px は 80px ではなく、60pxとなる。
下:60px + 上:20px は 80px ではなく、60pxとなる。
paddingとmarginの初期化
* { margin: 0; padding: 0; }
初期設定のためにCSSファイルの一番上に記述します。それはCSSファイルが上から順番に実行するからです。
「*」はすべてに適応という意味であり、padding・marginともにリセット・初期化するために値を0に設定っしています。