「Bulletproof Web Design」という本を読んだことがありますが、それはよくわかりません。「#nav の幅を 720px と宣言しましたが、タブをインデントするために 46px の左パディングも割り当てています。要素の幅にパディングが追加されるため、ナビゲーションの合計幅は 766px になります。」
#nav
{
float:left;
width:720;
margin:0;
padding:10px 0 0 46px;
background:#FFCB2D;
}
#nav セレクターで定義されている幅は 720px で、パディングは 46px です。本が全幅で何を意味するのかわかりません。その表現は今まで聞いたことがありません。総幅は、幅とパディングが等しい一般的な用語ですか?
下の図を見ると、パディングがブロックの幅全体に影響を与えていることがわかります。
また、著者はパディングに簡略表記を使用しています。これは次のように分解されます。
top-padding: 10px;
right-padding: 0px;
bottom-padding: 0px;
left-padding: 46px;
水平方向のパディングは、全体の幅に貢献しています。
Box-Model の混同の古典的な例をここに示します。ただし、落ち着いてください。全幅というものがあります。しかし、新しい CSS の概念では、これはコンテンツ ボックスボックス モデルでのみ有効です。他にも 2 つのモデルがありますが、Border-boxとPadding-Boxです。
あなたが聞いたことのないものとして言及しているのは、要素の特定の幅を指定すると、パディングとボーダーの幅がその幅の外側になる、最も古く、おそらく最も使用されているボックス モデルです。合計幅 = コンテンツの幅 (720px) + パディングの幅 (20px+20px) + ボーダーの幅 (ある場合)
ただし、パディング ボックスボックス モデルは、要素に幅を指定しても、合計幅 = コンテンツ ボックス (720-40)px + パディング (20+20)pxであることを意味します。
推奨読書
彼が「合計幅」と言うとき、要素が占める実際の物理的スペースを意味します。画面では766pxで表示されます。