寬度(width)不要與其他屬性同時設定[CSS]

這是一個很基礎的 CSS 設計觀念，在設有寬度(width)的 Box 上，別加入 border , padding 及 margin 這三個屬性，這對於維護及變更上有相當的好處。

這下面就是全部都設在同一個 Box 上的例子，雖然所需要的語法很少，但在固定寬度的情況下，當要變更其他一個屬性時，勢必要重新設定寬度的大小，是非常不明智的作法，有嘗到苦果的朋友，想必就會瞭解。

.widget{
    width:200px;
    border:2px solid #000;
    padding:3px;
    margin:5px;
}

<div class="widget">text text</div>

最好的方式就是將寬度的屬性獨立成單一的 Box，其他屬性則設定在內層 Box 上，雖然需要較多的語法，但在未來的修改變動上會比較直覺，除了排版上的設定，其他 Box 盡可能使用相對寬度(%)的設定，在對整體欄寬做調整時會比較快樂。

.widget{
    width:200px;
}
.widget div{
    border:2px solid #000;
    padding:3px;
    margin:5px;
}

<div class="widget">
    <div>text text</div>
</div>