方塊模型(Box Model)

我們在瀏覽器中所看到的一段文字、一張圖片或者是一塊區塊等，都有其一定的區域；而這個區域基本上是由標籤所構築而成，例如：<div> 或 <p> 等等。

而瀏覽器的解析器則會將這區域格式化成一個方塊(Box)，這個方塊的最核心為內容區域，也就是我們想在瀏覽器上呈現出來的「資料」。在「內容區域」外，依序包含有 padding、border 與 margin 三個主要特性。

我們可以將這些已格式好的方塊稱之為方塊模型(Box Model)或箱型模式。

方塊模型主要是用來控制文字、圖片或者標籤效果在瀏覽器上所呈現出來的位置。

Content

代表文字或是一張圖片甚至是一個區塊等等，也就是在瀏覽器上所呈現出來的內容物。

border(邊框厚度)

圖中咖啡色的實線，它是代表著內容物的邊框，當框線厚度大於零時就會呈現出框線。

padding(內緣距離)

圖中綠色的區域，它是代表著內容物與邊框之間的距離，這個區域是看不到，但它是存在的。

margin(邊界空白距離)

圖中黃色的區域，它是代表著內容物邊框外的邊界空白距離，這個區域也是看不到，但它是存在的。它也代表著與其它元素或父元素之間的距離。

文章分類