css中padding和magin的區別

2022-04-01 14:18:57 字數 1159 閱讀 5615

1.margin

用來設定頁面中乙個元素所佔空間的邊緣到相鄰元素之間的距離.

如果提供全部四個引數值,將按上-右-下-左的順序作用於四邊。

如果只提供乙個,將用於全部的四邊。

如果提供兩個,第乙個用於上-下,第二個用於左-右。

如果提供三個,第乙個用於上,第二個用於左-右,第三個用於下。

在ie4+,margin屬性不可用於td和tr物件。

用法:body

2.padding

用來設定元素內容到元素邊界的距離。

如果提供全部四個引數值,將按上-右-下-左的順序作用於四邊。

如果只提供乙個,將用於全部的四條邊。

如果提供兩個,第乙個用於上-下,第二個用於左-右。

如果提供三個,第乙個用於上,第二個用於左-右,第三個用於下。

內聯物件要使用該屬性,必須先設定物件的height或width屬性,或者設定position屬性為absolute。

不允許負值。

用法:body

在下面這個例子中,我們將了解如何為文件本身(即body元素)定義外邊距。下圖顯示了我們對外邊距的要求。

滿足上述要求的css**如下:

body
或者你也可以採用一種較優雅的縮寫形式:

body
幾乎所有元素都可以採用跟上面一樣的方法來設定外邊距。例如,我們可以為所有用標記的文字段落定義外邊距:

bodyp
內邊距(padding)也可以被理解成「填充物」。這樣理解是合理的,因為內邊距並不影響元素間的距離,它只定義元素的內容與元素邊框之間的距離。

下面我們通過乙個簡單的例子來說明內邊距的用法。在這個例子中,所有標題都具有背景色:

h1 

h2

通過為標題設定內邊距,你可以控制在標題文字周圍填充多少空白:

h1 

h2

CSS中margin和padding屬性的區別

本文將講述html和css的關鍵 盒子模型 box model 理解box model的關鍵便是margin和padding屬性,而正確理解這兩個屬性也是學習用css布局的關鍵.注 為什麼不翻譯margin和padding?原因一,在漢語中並沒有與之相對應的詞語 原因二 即使有這樣的詞語,由於在編寫...

CSS中margin和padding的區別 1

在css中margin是指從自身邊框到另乙個容器邊框之間的距離,就是容器外距離。在css中padding是指自身邊框到自身內部另乙個容器邊框之間的距離,就是容器內距離。下面講解 padding和margin常用的用法 一 padding 1 語法結構 1 padding left 10px 左內邊距...

CSS中margin和padding的區別

在css中margin是指從自身邊框到另乙個容器邊框之間的距離,就是容器外距離。在css中padding是指自身邊框到自身內部另乙個容器邊框之間的距離,就是容器內距離。下面講解 padding和margin常用的用法 一 padding 1 語法結構 1 padding left 10px 左內邊距...