CSS中margin和padding的區別

2021-10-02 11:56:29 字數 1375 閱讀 7698

padding margin都是邊距的含義,關鍵問題得明白是什麼相對什麼的邊距.

padding是控制項的內容相對控制項的邊緣的邊距.margin是控制項邊緣相對父空間的邊距.

在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中relative和margin的區別

在寫網頁時,有時候乙個效果的實現由很多種方法,比如我們想要乙個盒子向下向左移動50px。這裡主要說一下relative和margin來實現的區別。我們的目的是黃色div移動。relative為div3加上以下 可以看到,我們達到了目的,此時div3向右下偏移50px,所佔據的空間是寬度為div3到右...

CSS中margin和padding屬性的區別

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

什麼時候用Margin?什麼時候用Padding?

這裡是修真院web小課堂,每篇分享文從 八個方面深度解web知識 技能,本篇分享的是 什麼時候用margin?什麼時候用padding?在html文件中,我們一般把html標籤粗分為塊級元素 block 和內聯元素 inline 塊級元素是是構成乙個html的主要和關鍵元素,任意乙個塊級元素均可以用...