上次我們在 Simple Block, Simple Inline 裡面從 HTML 和 CSS 兩方面稍為了解了 block 和 inline 和它們之間的分別,今次我們將會更全面地看看 CSS 中所謂的 block boxes 。 對於 display property ,下面的 value 會令一個 element 變成 block-level (從這裡開始我們會稱這些 elements 為 block-level elements) 。 block list-item run-in (某些情況) table (有點不同) 另外還有 floats 和 absolute positioning 的場合會產生 block boxes ,這不在本文的討論範圍內。 Principal Block Boxes Block-level elements (table 除外) 會產生所謂的 principal block boxes ,這 principal block boxes 中只能容納 block boxes 或是 inline boxes ,不能兩樣都有。 Anonymous Block Boxes 那麼,如果像下面遇到同時含有 block content 和 inline content 的場合要怎麼辦呢? <div> Some Text <p>More Text</p> Much More Text </div> 如此這般 CSS 會假定 "Some Text" 和 "Much More Text" 也被一個 block boxes 包圍著,而這些虛構的 boxes 便是所謂的 anonymous block boxes ,請看下圖。 就是說 div principal block box 裡面有三個 block boxes 。 包圍著 "Some Text" 的 anonymous block box 。 p block box 。 包圍著 "Much More Text" 的 anonymous block box 。 List-Item B...