CSS「ボックスモデル」の意味

CSS「ボックスモデル」の意味 CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。 １．はじめに いきなりですいませんが、CSSの「ボックスモデル」とは、次のようなものを指します（詳細は色々端折ってます）。 この図は、CSSのボックスモデルの解説では必ずといっていいほど登場します。 ただ、そこにmarginやborder、padding、floatやマージンの相殺といった説明があっても、「結局ボックスモデルって何？」という感じで、それ自体が何を指すものかといった説明がされていないものが多いのではないか？と感じてました（探せばあるのかもしれませんが）。 ということで、ボックスモデル自体の意味について、自分なりに解説してみたいと思います。 認識誤りがありましたらどこかでつぶやいてください。 ２．「ボックスモデル」について まず、ボックスモデルについては、 CSS2.1仕様 の8章に次のように記述されています。 The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. （CSSボックスモデルは、ドキュメントツリーの要素のために生成され、視覚的なフォーマット・モデルによってレイアウトされる長方形の箱について述べます。） ちなみに「ドキュメントツリー」とは、CSS2仕様の3.1の定義で次のように書かれています。 The tree of elements encoded in the source document.

http://bit.ly/RPaUFg