margin padding樣式屬性

2021-10-08 03:08:44 字數 1388 閱讀 2244

margin-left: 10px;

margin-right: 10px;

margin-top: 10px;

margin-bottom: 10px;

用於在乙個宣告中設定所有外邊距的寬度,或者設定各邊上外邊距的寬度。該屬性有多個值:值描述

auto

瀏覽器計算外邊距。

length

規定以具體單位計的外邊距值,比如畫素、厘公尺等。預設值是 0px。注:允許使用負值,不過要謹慎使用;

規定基於父元素的寬度的百分比的外邊距。

inherit

規定應該從父元素繼承外邊距。注:ie瀏覽器不支援"inherit"屬性值 。

順時針方向:

margin:0 auto;——水平居中顯示,

*——取消瀏覽器為html文件中各標籤設定的margin預設值,方便後面設定,

塊級元素的垂直相鄰外邊距會合併(即外邊距合併),合併後的外邊距間距等於兩個外邊距高度中的較大者,也叫margin塌陷;

行內元素實際上不佔上下外邊距;行內元素的的左右外邊距不會合併;浮動元素的外邊距也不會合併;

在乙個宣告中設定元素所有內邊距的寬度,或者設定各邊上內邊距的寬度, 該屬性有多個值:值描述

auto

瀏覽器計算內邊距。

length

規定以具體單位計的內邊距值,比如畫素、厘公尺等。預設值是 0px。不允許使用負值;

規定基於父元素的寬度的百分比的內邊距。

inherit

規定應該從父元素繼承內邊距。注:ie瀏覽器不支援"inherit"屬性值 。

順時針:跟margin相同

行內非替換元素上設定的左內邊距僅在元素所生成的第乙個行內框的左邊出現。

*——取消瀏覽器為html文件中各標籤設定的padding預設值,方便後面設定,

行內非替換元素上設定的內邊距不會影響行高計算,因此如果乙個元素既有內邊距又有背景,從視覺上看可能會延伸到其他行,有可能還會與其他內容重疊;元素的背景會延伸穿過內邊距;

盒模型及margin padding

background顏色會渲染padding區域 padding top 25px padding left 25px padding bottom 25px padding right 25px 上述 簡寫方法 4個值 順時針 上 右 下 左 padding 10px 20px 30px 40px...

margin,padding之間的比較

box1,box2 box2 html box1 box2 複製 同上,box1,box2增加浮動屬性 box1,box2 box1 box2 html box1 box2 複製 box2的margin left增加到100px box1 box2 html box1 box1 tdtnzdbfth...

相容的網頁寬度margin padding

hack相容 moz firefox 4 webkit safari 和 chrome o opera ie6承認 和 和 不承認 important ie7識別 和 不識別 識別 imortant 而firfox兩個都不識別,識別 important selector 當然。還有專門針對ie7的寫...