頁面上顯示的每個元素(包括內聯元素)都可以看作一個盒子,即盒模型( box model )。請看 Chrome DevTools 里的截圖:
可以顯而易見的看出盒模型由 4 部分組成。從內到外分別是:
content -> padding -> border -> margin
按理來說一個元素的寬度(高度以此類推)應該這樣計算:
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同瀏覽器(你沒有猜錯,就是那個與眾不同的瀏覽器)對寬度的詮釋不一樣。符合 W3C 標準的瀏覽器認為一個元素的寬度只等于其 content 的寬度,其余都要額外算。于是你規定一個元素:
新聞熱點
疑難解答