網頁設計基礎知識:Margin 和 Padding 到底差在哪裡?

網頁設計-蘋果網頁設計公司

網頁設計案件展示

New things

網頁 ‧ 網頁設計

  1. 首頁
  2. 網頁 ‧ 網頁設計
  3. 網頁設計基礎知識:Margin 和 Padding 到底差在哪裡?

網頁設計基礎知識:Margin 和 Padding 到底差在哪裡?

發佈日期：2018-07-18

文章引用自：//www.w3school.com.cn/css/css_boxmodel.asp

網頁設計

基礎知識
Box Model 它描述了元素之間的彼鄰關係，即是網頁設計是否能夠成功透過 CSS ，讓整個頁面完整呈現。

統整-快速筆記：
1.[margin]能設置負值，[padding]不能設置負值
2.合併問題：塊級元素的垂直相鄰外邊距會合併，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會、浮動元素的外邊距也不會。

蘋果網頁設計提供最新畫面網頁設計，公司架設網路站，SEO關鍵字操作。快速、貼心、專業的服務
 

語法結構介紹

margin(外邊距)

 
  • （1）margin-left:1px; 左
  • （2）margin-right:1px; 右
  • （3）margin-top:1px; 上
  • （4）margin-bottom:1px; 下
  • （5）margin：1px; 四邊統一
  • （6）margin:1px 2px; 上下、左右
  • （7）margin:1px 2px 3px; 上、左右、下內
  • （8）margin:1px 2px 3px 4px; 上、右、下、左

注意:任何版本IE都不支援屬性值“inherit”

padding(內邊距)

 
  • （1）padding-left:1px; 左
  • （2）padding-right:1px; 右
  • （3）padding-top:1px; 上
  • （4）padding-bottom:1px; 下
  • （5）padding：1px; 四邊統一
  • （6）padding:1px 2px; 上下、左右
  • （7）padding:1px 2px 3px; 上、左右、下內
  • （8）padding:1px 2px 3px 4px; 上、右、下、左