2009-04-15

寬度(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>

1 回應:

Egist Li 提到...

受教了!
這個觀念很好阿,以前沒這樣想過 orz