Day11 | css padding margin
本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結[1]~前言大家在看任何跟邊界有關的CSS時不曉得有沒有看過這張圖,這張圖代表著HTML內的每個元素的邊界設定。今天這篇文章可以說是筆者在初學網頁時最常遇到的問題,相信很多人在初學網頁的時候都會margin、padding傻傻分不清,兩者的作用都是負責調整邊界的間距,到底兩個差別在哪裡呢?以及border與box-sizing之間又有什麼關係呢?筆者今天就用這篇文章帶大家深入了解HTML元素的邊界設定。marginmargin是負責調整元素與元素之間的邊界間距,屬於元素外部的邊界調整。屬性介...
本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結[1]~
前言大家在看任何跟邊界有關的 CSS 時不曉得有沒有看過這張圖,這張圖代表著 HTML 內的每個元素的邊界設定。
今天這篇文章可以說是筆者在初學網頁時最常遇到的問題,相信很多人在初學網頁的時候都會 margin 、 padding 傻傻分不清,兩者的作用都是負責調整邊界的間距,到底兩個差別在哪裡呢?以及 border 與 box-sizing 之間又有什麼關係呢?筆者今天就用這篇文章帶大家深入了解 HTML 元素的邊界設定。
marginmargin 是負責調整 元素與元素 之間的邊界間距,屬於元素外部的邊界調整。
屬性介紹 margin-top設定元素與元素之間的上邊界間距。
margin-right設定元素與元素之間的右邊界間距。
margin-bottom設定元素與元素之間的下邊界間距。
margin-left設定元素與元素之間的左邊界間距。
也可以將上述的屬性合併寫成 margin 即可,但要注意方向性, margin 寫法可以參考下圖
paddingpadding 是負責調整 元素內所有內容與元素自身 的邊界間距,屬於元素內部的邊界調整。
屬性介紹 padding-top設定元素內容與元素自身上邊界的間距。
padding-right設定元素內容與元素自身右邊界的間距。
padding-bottom設定元素內容與元素自身下邊界的間距。
padding-left設定元素內容與元素自身左邊界的間距。
也可以將上述的屬性合併寫成 padding 即可,但要注意方向性, padding 寫法可以參考下圖
borderborder 是元素最外層的邊界,常見的元素外框設定就是此設定。
box-sizingbox-sizing 的出現是...