CSS樣式里的padding和margin是什么意思,有何作用

Padding:這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。值 描述

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網絡空間、營銷軟件、網站建設、慶陽網站維護、網站推廣。

* padding-top

* padding-right

* padding-bottom

* padding-left

設置內邊距。

值可以是：

* 百分比（基于父元素寬度的百分比）

* 長度值（固定的padding值）

Margin:這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。

塊級元素的垂直相鄰外邊距會合并，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。

值 描述

* margin-top

* margin-right

* margin-bottom

* margin-left

設置針對邊距的屬性。

值可以是：

* 百分比（基于父對象總高度或寬度的百分比）

* 長度值（定義一個固定的邊距）

* auto（瀏覽器設定的值）。

默認值：未定義。

CSS中margin和padding的區別

CSS中margin和padding有以下三方面區別。

在CSS中margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。

1、語法結構。

padding：

padding-left:10px; 左內邊距、padding-right:10px; 右內邊距、padding-top:10px; 上內邊距、padding-bottom:10px; 下內邊距。

margin：margin-left:10px; 左外邊距、margin-right:10px; 右外邊距、margin-top:10px; 上外邊距、margin-bottom:10px; 下外邊距。

2、可能取的值。

padding：length規定具體單位記的內邊距長度、%基于父元素的寬度的內邊距的長度、auto瀏覽器計算內邊距、inherit 規定應該從父元素繼承內邊距。

margin：length? 規定具體單位記的外邊距長度、%基于父元素的寬度的外邊距的長度、auto瀏覽器計算外邊距、inherit 規定應該從父元素繼承外邊距。

3、瀏覽器兼容問題。

padding：所有瀏覽器都支持padding屬性、任何版本IE都不支持屬性值“inherit”。

margin：所有瀏覽器都支持margin屬性、任何版本IE都不支持屬性值“inherit”。

CSS屬性margin是什么意思？

margin:0 auto 0px表示上外抄邊距為0px，左右外邊距自動，下外邊距為0px。

margin跟padding一樣，也有簡潔寫法。我們可以使用margin屬性來設置四個方向的外邊距。在實際編程中，我們往往使用的是margin的這種高效簡潔寫法來編程。

擴展資料：

“margin:20px 40px;”表示top為20px，right為40px；由于bottom和left缺省，所以自動將它們分別設為20px和40px。轉化為第4種寫法為：“margin:20px 40px 20px 40px;”。

“margin:20px 40px 60px;”表示top為20px，right為40px，bottom為60px；由于left缺省，所以自動將它設為40px。轉化為第4種寫法為：“margin:20px 40px 60px 40px;”。

需要注意的是一種情況不能寫為缺省寫法：“margin:20px 40px 20px 60px;”。該例中，由于top和bottom相同，但right和left不同，所以不能將bottom缺省，否則會等同于“margin:20px 40px 60px 40px;”。

css margin

CSS:

#header,#footer{border:solid 1px #FF0033;height:20px;}

#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}

#content{margin:200px;width:50px;border:solid 1px #F03;background:#C69;}

XHTML:

div id="header"/div

div id="main" onclick="alert(this.currentStyle.hasLayout)"

div id="content"ttttt/div

/div

div id="footer"/div

OK,我來解釋一下，這個問題涉及到CSS的兩個話題：“空白邊疊加”和“IE擁有布局”。

首先，你應該已經對“空白邊疊加“這個問題有所了解，如果不然，則你可以此為關鍵字在網上搜索一下，這個問題非常普遍，所以我就不再這里復制粘貼了，

下面說說導致問題的原因：

在IE中,"擁有布局的元素之間空白邊不疊加"，

當main的樣式為：

#main{padding:1px;margin:10px;border:solid 1px #F03;}

這時候 div id="main" onclick="alert(this.currentStyle.hasLayout)"

通過JS探測到此時的main元素沒有“擁有布局”,所以"空白邊疊加"了，

為了使main元素"擁有布局"，將main的樣式設置為：

#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}

（實際應該為：

#main{padding:1px;margin:10px;border:solid 1px #F03;}

/* IE5-MAC 隱藏\*/

* html #main{height:1%;}

/* 不在 IE5-MAC中隱藏 */

）

即為元素設置任意高度（其他方法請搜索之）使其”擁有布局“，問題便解決了。IE的”擁有布局“會導致很多問題，所以你可以深入了解下這個問題，以便在以后遇到類似的問題輕松解決。

網頁設計中CSS樣式里設定margin:0 20px 30% 0;其中30%是相對于什么?是個什么概念?

margin是用來設定該元素與相鄰元素直接的距離。

margin:0

20px

30%

0對應的是與上，右，下，左四邊相鄰元素的距離。

30%指下邊距為其父元素的寬度的30%

補充：

1.如果margin只有三個值，按照值的順序為margin：top

right

bottom;

缺少了left，根據原則，則left的值有right來代替。

margin:10px

20px

30px;就等于margin:10px

20px

30px

20px;

2.如果margin只有兩個值，按照值的順序為margin：top

right;

缺少了bottom和left，根據原則left的值由right來代替，bottm的值由top來代替。

margin:10px

20px;就等于margin:10px

20px

10px

20px;

3.如果margin只有一個值，按照值的順序為margin:top;

缺少了bottom、left和right，根據原則left的值由right來代替，bottom的值由top來代替，right的值右top來代替，也就是說left的值也由top來代替。

margin:10px;就等于margin:10px

10px

10px

10px;

網頁css樣式,margin問題

這是內核瀏覽器的bug,很普遍的問題。解決的方法有幾種：

1.margin換成padding（最快捷的方法）

2.使用浮動

3.給父級div加點內容，比較邊框之類。或者在id=lianjie_t的div之前加點內容

具體不懂的話可以M我，互相幫助，望采納。。。

補充下，這個問題在IE6是可以的，是瀏覽器的BUG問題，只要是父級div沒有內容（也就是id=lianjie_t之前沒內容），而且使用margin就會出現這個問題。別和自己較勁。。。

本文題目：css的margin樣式,css的marginleft
網頁網址：http://vcdvsql.cn/article30/dsdiipo.html

成都網站建設公司_創新互聯，為您提供自適應網站、App設計、關鍵詞優化、品牌網站建設、移動網站建設、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯