CSS的BOX MODEL

box model算是學習css很重要的一個觀念，其實也不會很難，大概記住是這樣一層一層包起來的就可以了。

一開始學box model很容易會遇到的問題就是以為width(height)就代表這個物件的寬度(高度)，所以如果母物件的寬度小於子物件的寬度，就會很容易發生版面跑掉的問題。舉例來說，如果把width設為200px，border設為1px，padding及margin各為3px，那麼這個元素的寬度就會是200+(1+3+3)*2=214，而不是只有200px。

另外padding及margin的值可以各別設，如padding-top、padding-bottom、padding-left、padding-right，如果沒有特別標的話則為四個邊都是一樣的值。

而除了個別設以外，熟悉了以後比較常會全部設在一起，如padding:2px 1px 3px 0px，四個值依順序分別為上、右、下、左這樣，同樣可以套在margin、border。