## 盒子模型內外邊距和邊框介紹 當你的瀏覽器展現一個元素時，這個元素會占據一定的空間。這個空間由四部分組成。  ### 邊框 用 border 屬性給元素四周指定統一的邊框。在屬性值中指定邊框的寬度（通常是以顯示到屏幕上的像素為單位）， 樣式， 還有顏色。 樣式包括：  你也可以通過設置樣式為 `none` 或 `hidden` 來明確地移除邊框。 如果一次只指定某一個方向的邊框，就用屬性：`border-top，border-right， border-bottom，border-left`。 下面的規則設置了一個標題元素的背景色和頂部邊框： ```css h3 { border-top: 4px solid #7c7; /* 中綠 */ background-color: #efe; /* 淺綠 */ color: #050; /* 深綠 */ } ``` 結果如下：  ### 外邊距和內邊距 使用外邊距和內邊距調整元素的位置，并在其周圍創建空間。用`margin`屬性或者 `padding` 屬性分別設置外邊距和內邊距的寬度。 * 如果你指定一個寬度，它將會作用于元素四周（上、右、下、左）。 * 如果你指定兩個寬度， 第一個寬度會作用于頂部和底部，第二個寬度作用于右邊和左邊。 * 你也可以按照順序指定四個寬度： 上、右、下、左。 下面的規則通過給元素四周設置紅色邊框，標記出了類名為 `remark` 的段落元素。 ```css p.remark { border: 2px solid red; padding: 4px; margin-left: 24px; } ``` 結果如下：  > 注意： > > * 外邊距margin可以為負，內邊距不可以為負。 > * 行內元素設置上下邊距不影響行高。 > * 邊框是可見的，邊距是不可見的，只能看到對其他元素的影響。 ### 簡寫屬性： 我們可以根據規定順序，簡寫屬性： * 設置兩個屬性值，那么第一個值表示上下邊框的屬性，第二個值表示左右邊框的屬性。 * 設置三個屬性值，第一個值表示上邊框屬性，第二個值表示左右邊框屬性，第三個值表示下邊框屬性。 * 設置四個值，一次表示上右下左邊框的屬性。 例如： ```css h1{margin:10px 0px 15px 5px} ``` ### 行內元素的盒子模型 * 行內元素的盒子模型只能得到一行高度的空間，行高由`line-height`屬性決定，沒有設置該屬性則為內容默認高度。 > 如果設置上下邊框或者邊距，會導致盒子高度超過行高，盒子上下部分將會與其他元素重疊。這就是行內元素不可設置上下邊距的原因。 * 綜上所述，不推薦對行內元素設置盒子屬性，一般先用`display`屬性設置內聯元素為塊級元素顯示，再設置盒子屬性。 ### 元素盒子屬性的默認值 * 大多HTML元素的盒子屬性默認值都為0。 * 少部分HTML元素盒子屬性存在默認值，如：body,p,ul,li,form標簽等，因此我們在需要的時候可以先初始化他們的屬性為0。