Margin、Border、Padding屬性的區別和聯繫

2021-01-07 51CTO
Margin、Border、Padding屬性的區別和聯繫

本文向大家描述一下DIV+CSS中Margin屬性、Border屬性、Padding屬性三者的聯繫與區別，相信本文介紹一定會讓你有所收穫，歡迎大家一起來學習DIV+CSS網頁布局。

作者：admin來源：mscss.cn|2010-08-23 15:40

你對DIV+CSS中Margin屬性、Border屬性、Padding屬性的區別和聯繫是否了解，這裡和大家分享一下，希望本文介紹對你有所幫助。

Margin屬性、Border屬性、Padding屬性三者的聯繫與區別

三個元素的含義：

Margin屬性

檢索或設置對象四邊的外延邊距。如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。如果只提供一個，將用於全部的四邊。如果提供兩個，***個用於上、下，第二個用於左、右。如果提供三個，***個用於上，第二個用於左、右，第三個用於下。內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。

Border屬性

內容的邊框；border-color的默認值將採用文本顏色。要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。

Padding屬性

檢索或設置對象四邊的補丁邊距。如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。如果只提供一個，將用於全部的四條邊。如果提供兩個，***個用於上、下，第二個用於左、右。如果提供三個，***個用於上，第二個用於左、右，第三個用於下。內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。不允許負值。


記住這張圖，這三者的關係相信你就不會忘了。

【編輯推薦】

IE6不支持的五大CSS選擇符 實例解析CSS padding 屬性用法 DIV+CSS網頁布局中margin優化的一種思路 DIV+CSS開發Xhtml網頁對SEO優化的影響 DIV CSS網頁布局中對段落進行排版的方法

【責任編輯：

程華權

TEL：（010）68476606】

點讚 0

相關焦點

  • DIV+CSS中padding和margin屬性用法
    DIV+CSS是現在網頁布局的主流，你對其中的padding和margin兩個重要屬性的用法是否了解，這裡和大家分享一下，相信本文介紹一定會讓你有所收穫。
  • CSS中padding-left和padding-left屬性的區別和聯繫
    CSS中padding-left和padding-left屬性的區別和聯繫 本文向大家介紹一下CSS中padding-left屬性和 padding-left屬性的區別，padding-left 屬性設置元素左內邊距，而padding-left 屬性設置元素右內邊距。
  • 用Margin還是用Padding
    用margin還是用padding這個問題是每個學習CSS進階時的必經之路。CSS邊距屬性定義元素周圍的空間。
  • CSS中padding-top和padding-left屬性的區別
    CSS中padding-top和padding-left屬性的區別 本文向大家描述一下CSS中padding-top和padding-left屬性的區別，padding-top屬性設置元素的上內邊距（空間），而padding-left 屬性設置元素左內邊距（空白）。
  • CSS中padding-bottom和padding-right屬性的區別
    CSS中padding-bottom和padding-right屬性的區別 本文向大家介紹一下CSS中padding-bottom 屬性和padding-right屬性的區別，padding-bottom 屬性設置元素的下內邊距（底部空白），而padding-left 屬性設置元素右內邊距（空白）。
  • 巧用margin/padding的百分比值實現高度自適應
    設置容器的padding-bottom/top使用margin/padding的百分比值來解決自適應高度的關鍵在於：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那麼想要把這倆屬性的值統一起來就很簡單了。
  • CSS padding屬性用法要點
    CSS padding屬性用法要點 CSS padding屬性定義元素的內邊距,本文向大家介紹一下CSS padding屬性的用法，padding 屬性接受長度值或百分比值，但不允許使用負值。
  • 不要告訴我你懂margin
    你真的了解margin嗎？你知道margin有什麼特性嗎？你知道什麼是垂直外邊距合併？margin在塊元素、內聯元素中的區別？什麼時候該用 padding而不是margin？你知道負margin嗎？你知道負margin在實際工作中的用途嗎？常見的瀏覽器下margin出現的bug有哪些？
  • 深入剖析Firefox下 margin-top失效原因與解決方案
    在這個說明中，「collapsingmargins」（摺疊margin）的意思是：2個或以上盒模型之間（關係可以是相鄰或嵌套）相鄰的margin屬性（這之間不能有非空內容、padding區域、border邊框或使用清除分離方法）結合表示為一個單獨的margin。在css2.1中，水平的margin不會被摺疊。
  • Padding與line-height的區別
    Padding與line-height的區別 本文和大家分享一下Padding屬性與line-height的區別，這是CSS基礎知識，對盒模型知識與布局以及相關屬性不是很了解的時候，是很容易混淆與分不清楚的。
  • 關於css margin,你需要知道的一切
    特別是，margin之間如何相互作用，以及 margin 重疊效果。CSS 盒模型CSS 盒模型指的是一個盒子的各個部分——content、padding、border和margin,它們各自之前是如何布局及相互作用的。盒子的的四個margin屬性和maring縮寫都在CSS1中定義。
  • 48 margin屬性詳解
    margin屬性margin是盒子的外邊距，是盒子和其他盒子之間的距離。margin也有四個方向。以margin開頭，接著跟一個小短橫，然後跟表示方向的單詞，就是margin的四個方向的小屬性。margin的塌陷所謂的margin的塌陷，就是豎直方向的margin，有塌陷現象。
  • CSS padding屬性用法詳解
    CSS padding屬性用法詳解 本文向大家介紹一下CSS padding屬性的用法，元素的內邊距在邊框和內容區之間，控制該區域最簡單的屬性是padding屬性。
  • 盒子模型有哪些屬性
    border包圍在padding的邊緣，也分為上，右，下，左四個區域4）邊距 marginmargin包圍在border的上、右、下、左四個邊緣padding屬性2）設置三個關於border的屬性h1 {border-width: 6px;border-style: solid;border-color:
  • css3必須了解的知識 css中常見的樣式屬性和值
    css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性邊框屬性邊框屬性比較重要.border{ border: 2px solid red;/*設置邊框樣式 寬度為2px 可見 紅色 也可以分開寫*/ border-width: 2px;
  • CSS中margin-top和margin-bottom屬性使用說明
    CSS中margin-top和margin-bottom屬性使用說明 本文向大家介紹一下CSS margin屬性的用法，這裡主要介紹一下margin-top屬性和margin-bottom屬性的使用，希望對你的學習有所幫助。
  • 傳智播客詳解Css3九大常用屬性
    在Css3的學習和實際操作中,我們經常會接觸到一些常用屬性,比如字體、文本、列表和背景等。下面，傳智播客將對常用的Css3九大屬性進行詳解。6.傳智播客詳解Css3九大常用屬性—邊框擴展(大綱要求)顏色 border-top-color:顏色值;線型： border-top-style:solid;
  • margin-top屬性的語法和特徵
    margin-top屬性的語法和特徵 本文向大家介紹一下margin-top屬性的用法，它的語法取值有兩種，分別是auto :取計算機值，length :由浮點數字和單位標識符組成的長度值 | 百分數。
  • 實例解析CSS padding 屬性用法
    實例解析CSS padding 屬性用法 本文向大家介紹一下CSS padding 屬性的定義和用法，padding 簡寫屬性在一個聲明中設置所有內邊距屬性。這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。
  • CSS margin-bottom屬性使用秘訣
    CSS margin-bottom屬性使用秘訣 本文向大家描述一下CSS margin-bottom屬性的用法，margin-bottom屬性設置元素的下外邊距，並且允許使用負值，希望本文介紹對你有所幫助。