パディングとマージン

パディングとマージン

パディング:内容領域とボーダーとの間の余白領域です。要素に指定した背景色や背景画像はこの部分にも適用されます。


マージン:ボーダーの外側に設定される余白領域です。要素に指定した背景色や背景画像はこの部分には適用されず、背景は常に透明になります。そのため、親要素に背景が設定されている場合には、その背景が透けてみえることになります。

背景色・背景画像:要素に指定した背景色や背景画像は、要素が生成するボックスの内容領域、パディング領域、ボーダー領域に表示されます。背景色と背景画像は、背景色の上に背景画像が表示されるという関係になっています。そのため、指定した背景画像が利用できる場合には背景画像が前面に表示され、画像に透明な部分があればそこについては背景色が透けて見えることになります。