iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

基礎中的基礎系列系列 第 14

基礎中的基礎系列之padding,margin,border

  • 分享至 

  • xImage
  •  

今天要來介紹padding &margin &border:

看到英文先別急著關掉,給我解釋的機會嘛

開始前先看看介紹的圖片:

哎呀不是這張拉!還是努力看完吧

是下面那張拉:

看圖片就可以很清楚了解:
padding(邊距)是橘綠色那塊,夾在content和border之間
border(邊框):就是途中藍色那塊
margin(邊界):就是border以外的空間

你以為結束了嗎?

還沒勒

以上三項都可加入方向性:

border-top:1px solid red;
padding-top:20px;
margin-top:20px;

眼尖的你 一定看到不同了:border寫法跟別人不一樣

border:1px solid red;
1px 邊框粗細
solid 邊框的樣式 solid為實心
red 為邊框顏色

看到這相信你對 padding margin border 有基本認知了 那就趕快去練習吧!


上一篇
基礎中的基礎系列之css權重
下一篇
基礎中的基礎系列之 css-float
系列文
基礎中的基礎系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言