ie 盒子模型的範圍也包括margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了border 和 pading。
例：一個盒子的 margin 為 20px，border 為1px，padding 為 10px，content 的寬為 200px、高為 50px，
假如用標準 w3c 盒子模型解釋，那麼這個盒子需要佔據的位置為：寬20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬1*2+10*2+200=222px、高 1*2+10*2+50=72px；
假如用ie 盒子模型，那麼這個盒子需要佔據的位置為：寬 20*2+200=240px、高20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。
盒子模型的選定：
怎麼樣才算是選擇了“標準 w3c 盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype聲明<!DOCTYPE html>。假如不加 doctype 聲明，那麼各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
PS：CSS中margin和padding的區別
在CSS中margin是指自身邊框到自身外部另一個容器邊框之間的距離，就是容器外距離；padding則是容器內距離。
一、padding
1、文法結構
（1）padding-left:10px; 左內邊距
（2）padding-right:10px; 右內邊距
（3）padding-top:10px; 上內邊距
（4）padding-bottom:10px; 下內邊距
（5）padding：10px; 四邊統一內邊距
（6）padding:10px 20px; 上下、左右內邊距
（7）padding:10px 20px 30px; 上、左右、下內邊距
（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距
2、可能取的值
（1）length 規定具體單位記的內邊距長度
（2）% 基於父元素的寬度的內邊距的長度
（3）auto 瀏覽器計算內邊距
（4）inherit 規定應該從父元素繼承內邊距
3、瀏覽器安全色問題
（1）所有瀏覽器都支援padding屬性
（2）任何版本IE都不支援屬性值“inherit”
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3關於translate屬性的詳細介紹
CSS3實現旋轉光環效果的實現步驟
Css3中的border-image屬性詳細介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
