CSS中margin和padding的區別

1樓：匿名使用者

一、padding

1、語法結構

（1）padding-left:10px; 左內邊距

（2）padding-right:10px; 右內邊距

（3）padding-top:10px; 上內邊距

（4）padding-bottom:10px; 下內邊距

（5）padding：10px; 四邊統一內邊距

（6）padding:10px 20px; 上下、左右內邊距

（7）padding:10px 20px 30px; 上、左右、下內邊距

（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距

2、可能取的值

（1）length 規定具體單位記的內邊距長度

（2）% 基於父元素的寬度的內邊距的長度

（3）auto 瀏覽器計算內邊距

（4）inherit 規定應該從父元素繼承內邊距

3、瀏覽器相容問題

（1）所有瀏覽器都支援padding屬性

（2）任何版本ie都不支援屬性值「inherit」

二、margin

1、語法結構

（1）margin-left:10px; 左外邊距

（2）margin-right:10px; 右外邊距

（3）margin-top:10px; 上外邊距

（4）margin-bottom:10px; 下外邊距

（5）margin:10px; 四邊統一外邊距

（6）margin:10px 20px; 上下、左右外邊距

（7）margin:10px 20px 30px; 上、左右、下外邊距

（8）margin:10px 20px 30px 40px; 上、右、下、左外邊距

2、可能取的值

（1）length 規定具體單位記的外邊距長度

（2）% 基於父元素的寬度的外邊距的長度

（3）auto 瀏覽器計算外邊距

（4）inherit 規定應該從父元素繼承外邊距

3、瀏覽器相容問題

（1）所有瀏覽器都支援margin屬性

（2）任何版本ie都不支援屬性值「inherit」

三、margin和padding的區別用圖表示為

2樓：千鋒教育

在css中margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在css中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。下面講解 padding和margin常用的用法一、padding 1、語法結構（1）padding-left:

10px; 左內邊距（2）padding-right:10px; 右內邊距（3）padding-top:10px; 上內邊距（4）padding-bottom:

10px; 下內邊距（5）padding：10px; 四邊統一內邊距（6）padding:10px 20px; 上下、左右內邊距（7）padding:

10px 20px 30px; 上、左右、下內邊距（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距 2、可能取的值（1）length 規定具體單位記的內邊距長度（2）% 基於父元素的寬度的內邊距的長度（3）auto 瀏覽器計算內邊距（4）inherit 規定應該從父元素繼承內邊距 3、瀏覽器相容問題（1）所有瀏覽器都支援padding屬性（2）任何版本ie都不支援屬性值「inherit」二、margin 1、語法結構（1）margin-left:10px; 左外邊距（2）margin-right:

10px; 右外邊距（3）margin-top:10px; 上外邊距（4）margin-bottom:10px; 下外邊距（5）margin:

10px; 四邊統一外邊距（6）margin:10px 20px; 上下、左右外邊距（7）margin:10px 20px 30px; 上、左右、下外邊距（8）margin:

10px 20px 30px 40px; 上、右、下、左外邊距 2、可能取的值（1）length 規定具體單位記的外邊距長度（2）% 基於父元素的寬度的外邊距的長度（3）auto 瀏覽器計算外邊距（4）inherit 規定應該從父元素繼承外邊距 3、瀏覽器相容問題（1）所有瀏覽器都支援margin屬性（2）任何版本ie都不支援屬性值「inherit」

css中margin和padding的區別

3樓：匿名使用者

盒模型的外邊距和內邊距：

margin是對外的，padding是對內的。

margin 在一個宣告中設定所有外邊距屬性。

margin-bottom 設定元素的下外邊距。

margin-left 設定元素的左外邊距。

margin-right 設定元素的右外邊距。

margin-top 設定元素的上外邊距。

2.margin樣式的簡寫方式，padding同理：

例子 1

margin:10px 5px 15px 20px;

上外邊距是 10px

右外邊距是 5px

下外邊距是 15px

左外邊距是 20px

例子 2

margin:10px 5px 15px;

上外邊距是 10px

右外邊距和左外邊距是 5px

下外邊距是 15px

例子 3

margin:10px 5px;

上外邊距和下外邊距是 10px

右外邊距和左外邊距是 5px

例子 4

margin:10px;

所有 4 個外邊距都是 10px

4樓：匿名使用者

通俗地說——

padding 就是內容與邊框的距離；

margin 就是邊框與其他元素的距離。

5樓：千鋒教育

一、padding

1、語法結構

（1）padding-left:10px; 左內邊距

（2）padding-right:10px; 右內邊距

（3）padding-top:10px; 上內邊距

（4）padding-bottom:10px; 下內邊距

（5）padding：10px; 四邊統一內邊距

（6）padding:10px 20px; 上下、左右內邊距

（7）padding:10px 20px 30px; 上、左右、下內邊距

（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距

二、margin

1、語法結構

（1）margin-left:10px; 左外邊距

（2）margin-right:10px; 右外邊距

（3）margin-top:10px; 上外邊距

（4）margin-bottom:10px; 下外邊距

（5）margin:10px; 四邊統一外邊距

（6）margin:10px 20px; 上下、左右外邊距

（7）margin:10px 20px 30px; 上、左右、下外邊距

（8）margin:10px 20px 30px 40px; 上、右、下、左外邊距

css中margin和padding的區別

6樓：黑馬程式設計師

margin和padding都表示邊距的，margin是指的外邊距屬性,padding是指的內邊距。這是盒子模型的概念。

盒子模型示意：

**示例：

結果如下：

7樓：千鋒教育

一、padding 1、語法結構（1）padding-left:10px; 左內邊距（2）padding-right:10px; 右內邊距（3）padding-top:

10px; 上內邊距（4）padding-bottom:10px; 下內邊距（5）padding：10px; 四邊統一內邊距（6）padding:

10px 20px; 上下、左右內邊距（7）padding:10px 20px 30px; 上、左右、下內邊距（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距二、margin 1、語法結構（1）margin-left:

10px; 左外邊距（2）margin-right:10px; 右外邊距（3）margin-top:10px; 上外邊距（4）margin-bottom:

10px; 下外邊距（5）margin:10px; 四邊統一外邊距（6）margin:10px 20px; 上下、左右外邊距（7）margin:

10px 20px 30px; 上、左右、下外邊距（8）margin:10px 20px 30px 40px; 上、右、下、左外邊距希望我的回答能幫到你

8樓：解答小博士

margin是外邊距 padding 是內邊距兩個都能實現一些相同的效果，比如在body裡面有個div框可以通過對body加padding改變div的位置，也能對div盒子用margin改變實現一樣的效果，只是相互作用的物件不一樣。

css中margin和padding的區別

9樓：青鳥中關村專家

margin指的是外邊距，padding指的是內邊距。

外邊距就是指盒子與頁面之間的距離

內邊距就是內容與盒子之間的距離

上圖就把內外邊距的卻別表示出來了

10樓：好程式設計師

一、padding

1、語法結構

（1）padding-left:10px; 左內邊距

（2）padding-right:10px; 右內邊距

（3）padding-top:10px; 上內邊距

（4）padding-bottom:10px; 下內邊距

（5）padding：10px; 四邊統一內邊距

（6）padding:10px 20px; 上下、左右內邊距

（7）padding:10px 20px 30px; 上、左右、下內邊距

（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距

2、可能取的值

（1）length 規定具體單位記的內邊距長度

（2）% 基於父元素的寬度的內邊距的長度

（3）auto 瀏覽器計算內邊距

（4）inherit 規定應該從父元素繼承內邊距

3、瀏覽器相容問題

（1）所有瀏覽器都支援padding屬性

（2）任何版本ie都不支援屬性值「inherit」

二、margin

1、語法結構

（1）margin-left:10px; 左外邊距

（2）margin-right:10px; 右外邊距

（3）margin-top:10px; 上外邊距

（4）margin-bottom:10px; 下外邊距

（5）margin:10px; 四邊統一外邊距

（6）margin:10px 20px; 上下、左右外邊距

（7）margin:10px 20px 30px; 上、左右、下外邊距

（8）margin:10px 20px 30px 40px; 上、右、下、左外邊距

2、可能取的值

（1）length 規定具體單位記的外邊距長度

（2）% 基於父元素的寬度的外邊距的長度

（3）auto 瀏覽器計算外邊距

（4）inherit 規定應該從父元素繼承外邊距

3、瀏覽器相容問題

（1）所有瀏覽器都支援margin屬性

（2）任何版本ie都不支援屬性值「inherit」

三、margin和padding的區別用圖表示為

CSS中margin和padding的區別

CSS中margin和padding的區別

css中margin和padding的區別

css中如何定義網頁寬度和位置，css中怎麼控制網頁的寬度

相關推薦