Design Code 設計密碼

CSS 框架

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。

內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

內邊距、邊框和外邊距都是可選的，默認值是零。

但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。

可以通過將元素的margin 和padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：

* { 
  margin: 0; 
  padding: 0; 
}

在CSS 中，width 和height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有10 個像素的外邊距和5 個像素的內邊距。如果希望這個元素框達到100 個像素，就需要將內容的寬度設置為70 像素，請看下圖：

#box { 
  width: 70px; 
  margin: 10px; 
  padding: 5px; 
}

提示：內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。