一個簡單的規則是嘗試避免對同一元素使用padding / margin和width屬性。即使用類似的東西

<div class="width-div">

     <div class="padding-div">

     ...........

     ...........

     </div>

 </div>

我碰到了這個問題，盡管它已經存在了兩年，但我想我可以添加這個，以防有人碰到這個問題。

CSS3現在具有box-sizing屬性。如果您設定，說，

.bigbox {

    box-sizing: border-box; 

    width: 1000px; 

    border: 5px solid #333;

    padding: 10px;

}

您的課程將是1000像素寬，而不是1030像素寬。當然，這對于使用像素大小的邊框和液體div的人非常有用，因為它解決了原本無法解決的問題。

更好的是，除IE7及更低版本外，所有主流瀏覽器均支持box-sizing。要包括寬度或高度尺寸內的所有項目，請將框大小設置為邊框。要將其他項目聚合為默認的寬度和/或高度，可以將框大小設置為“內容框”。

我不確定瀏覽器語法的當前狀態，但仍包含-moz和-webkit前綴：

.bigbox{

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}