Sunday, February 24, 2013

CSS: Margin vs Padding

Screen_shot_2011-10-28_at_6

這幾天如火如荼的在整合designer給出來的HTML/CSS跟我後端的CakePHP的code. 因為對HTML/CSS不熟的關係, 吃了不少苦頭. 今天因為遇到了一個奇怪的狀況, 不得不去翻了不少CSS相關的東西. 特此記下來以供參考. 今天學到的東西主要是Margin跟Padding的差別. 這兩個設定很相似, 但是有天差地遠的差異. 特別附上Firefox Inspect Element吐出來的圖當參考. 簡單來講, Margin是往外長, Padding是往內長. 所以假設Div A包住了Div B. Div A設Padding 10px跟Div B設Margin 10px得到的視覺效果會很相近, 就是Div A跟Div B的邊緣會有10 px的距離. 但是什麼時候該用Margin什麼時候該用Padding? 這就不是這篇討論的主題了. :p

 

No comments:

Post a Comment