內邊距、邊框和外邊距都是可選的，默認值為零。然而，許多元素的外部和內部邊距由用戶代理樣式表設置。您可以通過將元素的邊距和填充設置為零來重寫這些瀏覽器樣式。
CSS實現頁面布局的壹個思路:把頁面的所有元素都看成壹個類似於禮盒的盒子，可能由多層包裝組成，所以頁面元素也對應內容、邊框、內外邊距等等。在這裏，我要提醒大家，盒子模型是把元素看成三維的，它確實具有空間的3D屬性。css盒子的3D模型從上到下分為五層:1，邊框；；2、內容+填充；3、背景圖像；4、背景色；5、保證金。
目前有兩種盒子模型:標準盒子模型和IE盒子模型。區別如下:
為了滿足不同瀏覽器之間的差異，我們肯定使用標準的盒子模型。這裏，跨瀏覽器兼容方案是通過在網頁頂部添加DOCTYPE的聲明(或者使用css3的聲明)來解決的:
塊級元素占據壹行，默認情況下，它們的寬度自動填充其父元素的寬度。
行內元素不會獨占壹行，相鄰的行內元素會排列在同壹行，直到沒有壹行的空間，寬度會隨著元素的內容而變化。此外，
塊級元素:div，p，form，ul，Li，ol，dl，form，address，fieldset，HR，menu，table。...
行內元素(inline elements): a、span、strong、em、br、img、input、label、select、textarea和cite。....
如果妳想設置壹個元素的寬度和高度並顯示在壹行中，我們可以設置display的值為inline-block。
CSS3添加的盒子大小屬性允許我們指定元素使用哪種盒子模型。IE8及以上支持該屬性，Firefox需要添加瀏覽器廠商前綴-moz-，對於IOS和Android較低版本的瀏覽器，還需要添加-webkit-。它有三個屬性值:
Box-sizing: content-box: W3C標準盒模型，默認屬性。填充和邊框不包括在定義的寬度和高度中。
Box-sizing: border-Box: IE6混雜模式box模型，填充和邊框包含在定義的寬度和高度中。該屬性在怪異模式下顯示為框模型。
Box-sizing: inherit:從父元素繼承該屬性。
如果您將box-sizing: border-box設置為使用IE6混合框模型，那麽
設置填充和邊框後，內容區域的寬度和高度壓縮為70px 70px，框的原始大小仍然是100px 100px。
當集裝箱的寬度定義為寬度:100%；之後，如果添加了填充或邊框，就會溢出父容器並向外擴展。如果使用這種樣式，它被指定為box-sizing:border-box；那麽填充和邊框就不會溢出，而是向內收縮。這個效果很實用。