[CSS] paddingとmarginの使用方法

  CSS ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
padding margin

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に設定っしています。

SNSでもご購読できます。

コメントを残す

*