CSS Margin(外邊距) 寬高屬性

2021-09-18 05:26:28 字數 1577 閱讀 1160

外邊距實現盒子居中

必須是塊級元素

盒子必須指定寬度(width)

給左右外邊距都設定為auto就可使塊級元素水平居中。

如.header

文字盒子居中和背景區別

1.文字水平居中是text-align: center

2.盒子水平居中 左右margin改為auto

text-align: center; /*文字居中水平 */

margin: 10px auto; /*盒子水平居中 左右margin改為auto就可以了*/

3.插入,比如產品展示類

4.背景圖一般用於小圖示背景或超大背景

section img 

aside

清除元素的缺省內外邊距

*
行內元素只有左右外邊距,沒有上下外邊距。盡量不要給行內元素指定上下的內外邊距。

相鄰塊元素垂直外邊距合併

當上下相鄰的兩個塊元素相遇時,如果上面元素有下外邊距margin-bottom,下面元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和,而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併,也稱外邊距塌陷)。

巢狀塊元素垂直外邊距的合併

對於兩個巢狀關係的塊元素,如果父元素沒有上內邊距及邊框,則父元素的上外邊距會與子元素的上外邊距發生合併,合併後的外邊距為兩者中的較大者,即使父元素的上外邊距為0,也會發生合併。

解決方案:

可以為父元素定義1畫素的上邊框或上內邊距;

可以為父元素新增overflow: hidden

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子大小進行控制。width和height屬性值可以為不同單位的數值或相對于父元素的百分比%,實際工作中最常用的是畫素值。

大多數瀏覽器,如firefox、ie6及以上版本都採用了w3c規範,符合css規範的盒子模型總寬度和總高度的計算規則:

外盒尺寸計算(元素空間尺寸):

element空間高度=content height + padding + border + margin

element空間寬度=content width + padding + border + margin

內盒尺寸計算(元素實際大小):

element height=content height + padding + border (height為內容高度)

element width=content width + padding + border (width為內容寬度)

注意:寬度屬性width和高度屬性height僅適用於塊級元素,對行內元素無效(img標籤)

計算盒子模型的總高度時,還應考慮上下兩個盒子垂直外邊距合併情況。

如果乙個盒子和父親一樣寬,佔滿父親的寬度,則padding不會影響本盒子大小。

CSS margin外邊距例項

文字的上邊距設定用厘公尺 doctype html html head meta charset utf 8 title 邊距 title style p.ex1 style head body p 乙個沒有指定邊距大小的段落。p p class ex1 乙個2厘公尺上邊距的段落。p p 乙個沒有指...

web前端 CSS Margin 外邊距 013

css margin 外邊距 屬性定義元素周圍的空間。margin清除周圍的元素 外邊框 的區域。margin沒有背景顏色,是完全透明的 margin可以單獨改變元素的上,下,左,右邊距。也可以一次改變所有的屬性。可能的值 值說明 auto 設定瀏覽器邊距。這樣做的結果會依賴於瀏覽器 length ...

CSS margin 屬性和CSS 單邊外邊距屬性

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的 空白 設定外邊距的最簡單的方法就是使用 margin 屬性,這個屬性接受任何長度單位 百分數值甚至負值。css margin 屬性 設定外邊距的最簡單的方法就是使用 margin 屬性。margin用於設定物件標籤之間距離間隔,比如2...