margin和padding的區別

2021-08-16 01:19:43 字數 1801 閱讀 2836

margin是指從自身邊框到另乙個容器邊框之間的距離,就是容器外距離。(外邊距)

padding是指自身邊框到自身內部另乙個容器邊框之間的距離,就是容器內距離。(內邊距)

1、語法結構

(1)padding-left:10px; /margin-left:10px;           左內/外邊距

(2)padding-right:10px; /margin-right:10px;         右內/外邊距

(3)padding-top:10px; /margin-top:10px;            上內/外邊距

(4)padding-bottom:10px; /margin-bottom:10px;             下內/外邊距

(5)padding:10px;/ margin:10px;                              四邊統一內/外邊距

(6)padding:10px 20px; /margin:10px 20px;          上下、左右內/外邊距

(7)padding:10px 20px 30px;/margin:10px 20px 30px;        上、左右、下內/外邊距

(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左內/外邊距

關於padding:

注意:將padding設定為負值無效:

在塊元素中:

因此,padding在塊級元素下,上下左右可以隨意設定,會對元素內部發生改變。

在內聯元素中:

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

行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值,行內元素的padding元素,只有padding-

left和padding-right有效果,上下不識別;

關於margin:

margin:0 auto;  只對塊級元素起作用

在塊元素中:

因此,margin在塊級元素下,上下左右可以隨意設定。且塊級元素的margin的參照基準是前乙個元素即相對於自身之前的

元素有margin距離。如果元素是第乙個元素,則就是相對于父元素的margin距離。

在內聯元素中:

margin-top和margin-bottom對內聯元素(對行)的高度沒有影響,如果你要改變內聯元素的行高即類似文字的行間距,那

麼你只能使用這三個屬性:line-height,fong-size,vertical-align。請記住,這個影響內聯元素高度的是line-height而不是height。

margin和padding之我見

採用div css排版的話,如果有float屬性,在ie中選中文字的時候,經常會出現把一整個div全部選中,非常難看 而有時候又不會出現這種情況,自己是不是遇到過了?呵呵,奇怪吧,我來給你講.其實原因很簡單,主要看你做事是不是細心.這個就是margin和padding的區別了.如果你不知道margi...

margin和padding 的區別

經常會看到這樣的布局android layout margintop 1.0dip 比較迷惑。查了下資料,有篇文章講的不錯,拿來一起分享!就拿layout margintop和paddingtop為例。layout margintop是從當前設定的控制項的頭部,開始向上移動,直到碰到上乙個控制項 父...

margin和padding的區別

padding 10px 0 10px 20px,上10 右0 下10 左20 margin 10px 0 10px 20px,上10 右0 下10 左20 四個值順時針旋轉 目前web2.0已經越來被人們認可,因為喜歡搞web開發的人員不得不硬著頭皮去學習web2.0的標準,其中很重要的一條就是新...