一個盒子我們會分成幾個部分：
內(nèi)邊區(qū)(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)
1、內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。
如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小默認(rèn)和盒子大小是一致的。
通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大小。
width和height屬性只適用于塊元素。
2、內(nèi)邊距
內(nèi)邊距指的是元素內(nèi)容區(qū)與邊框以內(nèi)的空間。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來設(shè)置元素的內(nèi)邊距
padding:10px 20px 30px 40px
設(shè)置元素的上、右、下、左四個方向的內(nèi)邊距。
padding:10px 20px 30px;
設(shè)置元素的上、左右、下四個方向的內(nèi)邊距。
padding:10px 20px;
設(shè)置元素的上下、左右四個方向的內(nèi)邊距。
padding:10px
設(shè)置元素上下左右四個方向的內(nèi)邊距。?
同時在css中還提供了padding-top、padding-right、padding-left、padding-bottom分別用來指定四個方向的內(nèi)邊距。
3、外邊距
外邊距是元素邊框與周圍元素相距的空間。
使用margin屬性可以設(shè)置外邊距。
使用margin-top/right/left/bottom為元素設(shè)置四個方向。
使用margin：0 auto 可以使元素居中。
4、邊框
可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部。
可以使用border屬性來設(shè)置盒子的邊框。
和padding一樣，默認(rèn)width和height并包括邊框的高度。
border：1px red solid
分別指定了邊框的寬度、顏色、樣式。
使用border-top/left/right/bottom分別指定上左右下四個邊框的方向。
邊框的多種樣式。
邊框樣式：
-none 沒有邊框
--dotted 點線
--dashed 虛線
--solid 實線
--double雙線
--groove 槽線
--ridge 脊線
--inset 凹邊
--outset 凸邊
