CSS 的 margin 與 padding 有什麼差別

CSS 的 margin 與 padding 這兩者最大的差異是其中一個是外距,一個是內距,所謂的外距是指元素區塊與外部元素(也就是其它元素)之間的距離,內距則是指父層元素與內層元素之間的距離,無論是 margin 還是 padding 都屬於 CSS 排版設計的基礎,現在我們來看負責設計外部距離的 margin 與負責則內部距離的 padding 這兩個屬應的實際應用,為了讓各位看清楚這兩者的差異,以下我們分別寫 margin 以及 passing 的範例給各位看看。

CSS margin 的範例
原始碼: 在新視窗開啟程式碼文字檔
範例的視覺效果
這是第一個 span 標籤 這是第二個 span 標籤 這是第三個 span 標籤
我們利用兩個 span 標籤並排在一起,然後透過 margin 來控制彼此之間水平的距離,可以很清楚地看到 margin 數字加大,可以增加兩個 span 標籤之間的水平距離,除此之,margin 還可以控制上下,也就是垂直方向的元素距離,如果你想更進一步了解 margin 的用法,請參考這一篇《css margin 外距》的內容。

CSS padding 的範例
原始碼: 在新視窗開啟程式碼文字檔
範例的視覺效果
這是一段測試用的文字
這是一段測試用的文字
我們用 DIV 區塊來呈現 padding 的效果,在 DIV 區塊內隨意的寫了一段文字,然後透過 div 區塊的 padding 設定,讓文字與 DIV 區塊邊框間產生了一個距離,這個距離就是所謂的內距,第一個 DIV 區塊的 padding 設為 10px,第二個區塊的 padding 設為 20px,可以看到數字越大的 padding,內距呈現效果越明顯。padding 可以用來調整許多類似這樣網頁中的元素,適度的調整內距能夠讓整體的瀏覽視覺效果更加美觀,如果你想了解更詳細的 padding 用法,可以參考這一篇《css padding 內距》的內容。

有了以上兩個範例的解說,相信大家都應該了解 margin 與 padding 這兩個 css 重要屬性,在使用上有什麼樣的差別以及應用方式,簡單來說,控制元素外部與其它元素的關係用 margin,而如果要控制元素內部的關係,就用 padding,各位自己動手練習看看吧!

延伸閱讀
分享於 2015-03-03