CSSで余白を指定する方法メモ

CSSで余白を指定する方法をすぐに忘れてしまうので、メモしておきます。

ボックスモデル

要素を取り囲む領域にはmargin, border, paddingがある。余白の確保にはmargin, paddingを使う。

余白の指定方法

margin, paddingはそれぞれCSSでmargin, paddingプロパティを用いて指定する。

まとめて指定する方法

margin: 上 右 下 左;
margin: 上下 左右;
margin: 上 左右 下;

padding: 上 右 下 左;
padding: 上下 左右;
padding 上 左右 下;

個別に指定する方法

margin-top, margin-left, margin-right, margin-bottomプロパティを指定する。paddingも同様。