CSS 方盒子模型(Box Model)

HTML 的元素如H1 、P四週所佔的平面空間可想成一個方盒子, 了解元素佔據的面積大小, 有助於您在佈局版面時的空間規畫,安排出工整的頁面

  1. 邊框(Border):HTML每個元素如H1 、P..四週都有邊框的面積 ,它佔了螢幕的面基 ,css可改變邊框的大小、顏色..屬性 ,
  2. 外邊界框(Margin)外邊界框(Margin)在邊框(Border)外圍 ,用來設定元素之間的距離,它是完全透明的,不能指定顏色。比如:你可用來改變上列字串(或div)與下一列字串之間的距離大小,佈局間隔,使版面看起來不會太擁擠或太鬆散。
  3. 內邊界框(Padding):內邊界框是在邊框(Border)內圍 ,它是完全透明的,不能指定顏色,用來設定元素留白的距離,同樣用來改變佈局間隔
  4. 內容(Content):方盒空間內的文字、圖像..。

範例:

不同瀏覽器觀看視覺位置跑掉:傷腦筋嗎?請宣告版本DOCTYPE

IE8瀏覽器之前的版本, width(寬度)值內含 padding and border值 總合,所以用Firefox與Chrome觀看結果與IE8(含之前版本) 不同

在網頁檔最前列宣告<!DOCTYPE html>可解決對位相容問題.