Day11-HTML元素邊界關係!margin、padding、border
前言
大家在看任何跟邊界有關的 CSS 時不曉得有沒有看過這張圖,這張圖代表著 HTML 內的每個元素的邊界設定。
今天這篇文章可以說是筆者在初學網頁時最常遇到的問題,相信很多人在初學網頁的時候都會 margin 、 padding 傻傻分不清,兩者的作用都是負責調整邊界的間距,到底兩個差別在哪裡呢?以及 border 與 box-sizing 之間又有什麼關係呢?筆者今天就用這篇文章帶大家深入了解 HTML 元素的邊界設定。
margin
margin 是負責調整 元素與元素 之間的邊界間距,屬於元素外部的邊界調整。
- 屬性介紹
margin-top:設定元素與元素之間的上邊界間距。
margin-right:設定元素與元素之間的右邊界間距。
margin-bottom:設定元素與元素之間的下邊界間距。
margin-left:設定元素與元素之間的左邊界間距。
也可以將上述的屬性合併寫成 margin 即可,但要注意方向性, margin 寫法可以參考下圖
padding
padding 是負責調整 元素內所有內容與元素自身 的邊界間距,屬於元素內部的邊界調整。
- 屬性介紹
padding-top:設定元素內容與元素自身上邊界的間距。
padding-right:設定元素內容與元素自身右邊界的間距。
padding-bottom:設定元素內容與元素自身下邊界的間距。
padding-left:設定元素內容與元素自身左邊界的間距。
也可以將上述的屬性合併寫成 padding 即可,但要注意方向性, padding 寫法可以參考下圖
border
border 是元素最外層的邊界,常見的元素外框設定就是此設定。
- 邊界樣式介紹
border-width:設定邊框寬度大小。
border-style:設定邊框樣式,常見的有 實線(solid) 、 虛線(dashed) 。
border-color:設定邊框顏色。
- 屬性介紹
底下屬性後方所接的值為上面提到的樣式,順序為 border-width 、 border-color 、 border-style ,中間用空格隔開。
border-top:設定元素自身的上邊框。
border-right:設定元素自身的右邊框。
border-bottom:設定元素自身的下邊框。
border-left:設定元素自身的左邊框。
也可以將上述的屬性合併寫成 border 即可,代表四個方向的邊框都會套用一樣的樣式,寫法如下
box-sizing
box-sizing 的出現是用來調整區塊的內距與邊框計算方式,與 border 以及 padding 的設定有關,常見的狀況就是元素內的內容設定了 border 以及 padding 導致外框超出原本元素的外框,影響了網頁的美觀程度。
- 參數介紹
content-box;設定的寬度僅為內容寬度, padding 與 border 寬度會再額外加上去,所以內容仍然會超出元素自身的外框。
border-box;設定的寬度就已經包含內容寬度、 padding 與 border 寬度,所以內容不會超出元素自身的外框。
總結
今天提到了非常重要的邊界關係,假如今天要調整的是 元素與元素 之間不要靠得太近,就可以用 margin ,如果是要調整 元素內的內容與元素自身 不要靠得太近,就可以用 padding ,最後就用一個簡單的範例讓大家更了解 margin 以及 padding 的相關操作應用吧!