非學不可

【部落格css樣式】盒子box model(2)設定區塊的寬度和高度

上一篇講過盒子(box model)，想畢大家都比較知道盒子在css中到底是怎麼應用了。

接下來要介紹的是寬(width)和高(height)的設定。

一般來說在box裡面寬(width)是指左內緣到右內緣，高(height)是上內緣到下內緣。(如圖示)

由寬、高、留白和邊界的組合形成了整個版面的設計。

在設計版型時有時候會覺得怎麼好像差了一點偏了些，那是因為對div組件裡的寬高設定有誤解，

設定寬和高是指裡面的上.下.左.右內緣。留白(padding)、邊界( margin)還有邊框(border)都是會增加額外寬度的。

-----------------------------------------------------------------------------------------------------------

例如需要橫幅寬度設880px，設定width:880px;，只有內容(content)的部份。

#header{
background:#ccc ;
width:880px;
}

(↓範例)

看到的橫幅寬度是這樣的，但是因為考慮到要設定留白(padding)10px，但是又希望要讓他看起來一樣總寬是880px，

那就要減掉左右的10px所以寬要設860px，這樣整個橫幅總寬度才會是880px。

如果設定了寬度(width)880，留白(paddind)又設定了10px，那樣加起來就變900px。

#header{background:#ccc ;
width:860px;
padding:10px;
}

(↓範例)

-----------------------------------------------------------------------------------------------------------------------------------------

簡單來說看見的寬度是包括額外的部份，假設寬設100px但是在邊界左右各設了10px，那看到的會是content和padding共120px，

在區塊中設的寬高是設定上.下.左.右內緣，但實際看到的會是加上.下.左.右外緣。

-----------------------------------------------------------------------------------------------------------------------------------------------------

盒子box model系列：

【部落格css樣式】盒子box model(1)CSS中盒子的概念和痞客橫幅解說

【部落格css樣式】盒子box model(2)設定區塊的寬度和高度

ps：css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範，但無名、天空等各家部落格都是一樣的^^