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

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

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

原始碼

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

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

原始碼

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

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

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

原始碼

1. .widget{ 
2.    width:200px; 
3. } 
4. .widget div{ 
5.    border:2px solid #000; 
6.    padding:3px; 
7.    margin:5px; 
8. } 

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

原始碼

1. <div class="widget"> 
2.    <div>text text</div> 
3. </div> 

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