Margins and Padding

Margins and Padding | HTML Dog

マージン(margin)とパディング(padding)は要素の空間的な配置のために、最もよく用いられるプロパティである。マージンは何かの外側について、パディングは内側についてのものである。

例

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}

とすると、h2による見出しは、要素のページにおける大きさそれ自身は40px幅に拡大され、またその要素の周囲には20px幅の空きができる。

また、要素のそれぞれの側面を別々に設定することが出来る。

The Box Model

マージン、パディング、ボーダー(border)は、全てボックスモデル(box model)として知られるものの一部分である。（ベン図のようなものを想像すれば良い。）

上の例ではマージンボックスの四方向の幅が20pxに設定され、パディングボックスの幅が40pxに設定されたわけだ。