CSS中margin屬性詳解

2021-08-20 18:38:23 字數 2714 閱讀 3041

margin屬性概述

margin是css層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.

該接受任何長度單位,可以是畫素、英吋、公釐或 em。

相關屬性
margin 可以單獨改變元素的上,下,左,右邊距。也可以一次改變所有的屬性。

屬性

描述

margin

簡寫屬性。在乙個宣告中設定所有外邊距屬性。

margin-bottom

設定元素的下外邊距。

margin-left

設定元素的左外邊距。

margin-right

設定元素的右外邊距。

margin-top

設定元素的上外邊距。

使用語法

1.使用單獨屬性設定四邊的距離

#d2
​ 效果:

2.直接使用margin屬性設定所有外邊距:

#d2
3.使用margin簡化寫法注意事項:

margin合併(摺疊)

注意,在使用css的margin屬性時,會出現margin屬性的合併(摺疊)的現象.

這種合併分為兩種: 並列元素的合併和巢狀元素的合併

1.並列元素的合併:

具體表現為:

​ 當兩個元素並列時,兩者相隔的外邊距,取的是兩者所設定margin的最大值。

例如:

2.巢狀元素的合併:

具體表現為:

​ 當兩個元素巢狀到一起,並且沒有內邊距或邊框把外邊距分隔開時,它們的外邊距也會發生合併

例如:

3.margin摺疊注意事項:

margin摺疊只發生在塊級元素上;

浮動元素的margin不與任何margin發生摺疊;

設定了屬性overflow且值不為visible的塊級元素,將不與它的子元素發生margin摺疊;

絕對定位元素的margin不與任何margin發生摺疊;

根元素的margin不與其它任何margin發生摺疊;

注意事項
注意,在實際開發中.margin-bottom和margin-top需要特別說明

也就是說,普通的行內元素是無法使用該屬性的.

例如:

<

html

>

<

head

>

<

meta

charset="utf-8"

>

<

title

>關於margin-bottom和margin-top

title

>

<

style

>

divspan

style

>

head

>

<

body

>

<

div>內容體

div>

<

span

>我是span

span

>

<

div>內容體

div>

body

>

html

>

結果: -->完全沒有任何效果

解決方案:

當元素是行內元素時,不使用該屬性

把該元素轉換為塊級元素或者行內塊級元素

擴充套件-塊級元素和行級元素
塊級元素

總是在新行上開始,佔據一整行;

高度,行高以及外邊距和內邊距都可控制;

寬度與內容無關;

它可以容納任何元素。

行級元素

和其他元素都在一行上;

不可以設定寬高,其寬度隨著內容增加,高度隨字型大小而改變,寬高只與內容有關,

行內元素只能容納文字或者其他行內元素。

可以設定外邊界margin,但margin不對上下起作用,只能對左右起作用,

轉換​ 行級元素與塊級元素之間可以通過css的display屬性進行轉換

擴充套件-替換和不可替換元素

從元素本身的特點來講,元素可以分為替換元素和不可替換元素。

替換元素:
不可替換元素

CSS中margin屬性詳解

margin屬性概述 margin是css層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.該接受任何長度單位,可以是畫素 英吋 公釐或 em。相關屬性margin 可以單獨改變元素的上,下,左,右邊距。也可以一次改變所有的屬性。屬性描述 margin 簡寫屬性。在乙個宣告中設定所有外邊距屬...

CSS 中Margin引數詳解

margin 1 乙個引數值,將用於全部的四邊。2 兩個引數值,第乙個用於上 下,第二個用於左 右。3 三個引數值,第乙個用於上,第二個用於左 右,第三個用於下。4 四個引數值,將按上 右 下 左的順序作用於四邊。再如 有人問css 居中如何實現。那可以這麼寫 margin 0 auto margi...

CSS中margin和padding屬性的區別

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