CSS入門 | CSSボックスモデル | ボックスモデル

Tags:

すべてのHTML要素はボックス形状で構成され、これをボックスモデルと呼ぶ。 ボックスモデルはHTML要素をpadding、border、margin、contentに分ける。

CSS Box Model

  1. content: テキストや画像が入るボックスの実質的な内容部分である。
  2. padding: contentとborderの間の間隔である。paddingは目に見えない。
  3. border: contentとpaddingの周囲を囲む境界線である。
  4. margin: borderと隣接する要素の間の間隔である。marginは目に見えない。
<style>
    div {
        background-color: red;
        padding: 50px;
        border: 20px solid maroon;
        margin: 50px;
    }
</style>

heightとwidthプロパティの理解

すべてのWebブラウザーでHTML要素を正確に表現するには、このボックスモデルがどのように動作するかを正確に理解する必要がある。 CSSでheightとwidthプロパティを設定するとき、そのサイズが指す部分はcontent部分だけである。 HTML要素のheightとwidthプロパティで設定された高さと幅には、padding、border、marginのサイズは含まれない。

<style>
    div {
        width: 320px;
        padding: 10px;
        border: 5px solid maroon;
        margin: 0;
    }
</style>

HTML要素の高さと幅を求める

[css box size]

上の図で全体の幅を計算すると、width(70px) + left margin(10px) + left padding(5px) + right padding(5px) + right margin(10px) = 100pxになる。

つまり、HTML要素の全体幅を計算する公式は、width + left padding + right padding + left border + right border + left margin + right marginである。

また、HTML要素の全体高さを計算する公式は、height + top padding + bottom padding + top border + bottom border + top margin + bottom marginである。

このとき、margin領域のサイズは目で直接確認しにくい。 なぜなら、marginはborderと隣接する要素の間隔であり、背景色の影響を受けないからである。 しかし、HTML要素が占めるサイズには含まれる。

Internet Explorer 8以前では、widthやheightプロパティで設定した幅や高さにpaddingとborderのサイズまで含まれる。 この違いをなくすには、必ずHTML文書に<!DOCTYPE html>タグを挿入する必要がある。