2012年12月10日 星期一

CSS 的 padding 與 margin 這兩個好朋友

CSS 的 padding 與 margin 兩個哥倆好,常常幫助程式設計人員或網頁設計人員達到完美排版的工作成果,如果他們是真的人,應該像這兩位好的謝謝一下才是。

這一篇稍微的解說一下他們兩個有什麼樣的差異,可能有些朋友不是很清楚什麼情況要用哪個屬性,看過這篇應該就有個基本的概念了。

CSS padding

你可以去翻譯網站稍微查詢一下 padding 這個字,以 Google 翻譯翻出來的結果就是「填充」的意思,翻得相當好,在 CSS 的規範下,padding 就是用來設定內距,與填充的意思頗為相近,如果要設置一個 <div> 裡面元素的距離,用 padding 相當的好用。

CSS margin

剛剛學的馬上活用一下,立刻用 Google 翻譯來翻 margin 這個字的意思,翻出來的結果是「邊」,一樣翻譯得相當好,margin 就是用來設計外距,也就是與其他元素間的距離,與 padding 的內距不太一樣唷!

宗觀以上兩種屬性的用法,可以知道 padding 負責內部,而 margin 負責外部,兩者搭配著使用,可以輕鬆的設計出好看的版型與風格唷!

想更詳細的研究他們的用法可以參考以下兩篇文章
  1. CSS padding 內距屬性與用法範例
  2. CSS margin 屬性與用法範例
文章有包含範例,講解相當清楚,建議根據範例自己做一次唷!