css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)

CSS需要寫四個邊向數位的屬性常用的有三個,padding (內距)、margin (外距)、border (邊框),寫四邊向數值的時候可以用不同的方式來寫,可以更快更好~

屬性加方向:

最簡單的寫法就是在這三個屬性的後面加上方向就可以,這是用在單純想指定某一邊向數值的時候。

padding-top: 5px; (上內距)

padding-bottom: 5px; (下內距)

padding-left: 5px; (左內距)

padding-right: 5px; (右內距)

 

margin-top: 5px; (上外距)

margin-bottom: 5px; (下外距)

margin-left: 5px; (左外距)

margin-right: 5px; (右外距)

 

border-top: 5px; (上邊框)

border-bottom: 5px; (下邊框)

border-left: 5px; (左邊框)

border-right: 5px; (右邊框)

屬性值寫四個數值:

padding: 5px 5px 5px 5px;

margin: 5px 5px 5px 5px;

border: 5px 5px 5px 5px;

四個數值分別是:上 右 下 左

屬性值寫三個數值:

padding: 5px 5px 5px;

margin: 5px 5px 5px;

border: 5px 5px 5px;

三個數值分別是:上 左右 下

屬性值寫兩個數值:

padding: 5px 5px;

margin: 5px 5px;

border: 5px 5px;

兩個數值分別是:上下 左右

屬性值寫一個數值:

padding: 5px;

margin: 5px;

border: 5px;

寫一個數值就是四個邊向都一樣的意思

css border(邊框)屬性

Leave a Reply