マニュアルがマニュアルの役目をしていないですね。
この手の本がなぜ売れるか、私には理解に苦しむのですが(^^)
仕様の解説書なのに仕様書のほうが分かりやすい。
そもそもCSSでいうボックスとは、[視覚整形モデル]で言うところの、内容の周囲を取り巻く四角い囲いを言います。(HTMLで言うところのブロック要素とは違います。)
HTMLでは、要素そのものですが、CSSでは視覚整形における整形方法に関する説明です。それが分かっていると簡単な話です。
HTMLでは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
整形
デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )］より・・これに続く文章も重要なので読んでおくこと。
ですが、ここで登場する「整形」についての説明が、CSSにおけるブロックです。
ブロックの整形において、（その要素の）内容(content)の周囲にpaddin領域があり、paddinの外にborder領域があり、空にその外側にmargin領域があるのがブロックです。これらの４つを持つのがブロックで矩形をしています。
ブロックのmarginは他の要素のmarginと相殺されるなどがありますから、それぞれのルールを知っておくこと。
・content: その要素の内容
・padding: borderとの隙間
・border: 凝らすイシスの外側 背景はここまで塗られる。
・margin: 他の要素との間隔
を持つのがボックスです。
よって、あなたが質問されている意味でのブロックとは何かは意味がないのですが、実際の整形に当たっては、どれをブロックとするかは極めて重要になります。
例えば、ボックスのサイズを考えるときには、それ自身のサイズは内容(content)のサイズですが、他のブロックと並ぶときにはborderやmarginのサイズを含めないとなりません。また、内部に含まれるブロックのサイズが親のコンテナブロックのサイズを参照するときは、直近のstaticでない親の内容(content)のサイズを参照します。
言い換えればボックスは、TPOによってcontentであったり、pqddingであったり、borderであったり、marginであったりするという事です。
いずれにしても仕様書を読むほうが早くて完結でしかも正確です。
⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
このブロックについては
8.ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html )
9.視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
10.視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )
11.その他の視覚効果( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html )
が該当します。
これらに目を通すと、意味が正確に分かるでしょう。
★この邦訳は、CSS2のものです。現在利用されているのはCSS2.1です。いくつか重要な改訂がありますが、良い邦訳を知りません。(この部分については大きな変更はない)
原文をお読みください。文学ではない技術文書ですから難しくはないでしょう。オンライン邦訳も利用できますしね。
⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
CSS2.1の
⇒8.1 Box dimensions( http://www.w3.org/TR/CSS2/box.html#box-dimensions )
に図示されています。
CSS2.1原文『Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:』
CSS2邦訳『各ボックスはテキストや画像などの内容領域（content area）を持ち、その周囲には更にパディング（padding）、ボーダー（border）、マージン（margin）といった周辺領域を持つこともある。 各領域の大きさは先の章で定めるプロパティによって指定される。 以下に、各領域の相互関係及び各用語が参照する周辺領域について図示する: 』
変更はありませんね。
※paddingの定義や背景の範囲の変更はあります。
★firefox + firebugを使用すると視覚的にとっても分かりやすいでしょう。
すくなくとも、そのマニュアルよりは分かりやすいでしょう。
