HTML中padding和margin的區別和用法
阿新 • • 發佈:2018-01-04
布局 語法 tom mil strong 替換元素 它的 一段 div
需要在border外側添加空白時。
空白處不需要背景(色)時。
上下相連的兩個盒子之間的空白,需要相互抵消時。如15px + 20px的margin,將得到20px的空白。 語法: (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; 上、右、下、左外邊距 margin在塊元素、內聯元素中的區別
何時應當時用padding:
需要在border內測添加空白時。
空白處需要背景(色)時。 語法: (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; 上、右、下、左外邊距 padding在塊元素、內聯元素中的區別
margin(外邊距)
定義:margin是用來隔開元素與元素的間距,發生在元素本身的外部,margin用於布局分開元素使元素與元素互不相幹。 提示:margin: top right bottom left;(margin:10px 20px 30px 40px) 它的給值方式為上,右,下,左。 建議何時應當使用margin:需要在border外側添加空白時。
空白處不需要背景(色)時。
上下相連的兩個盒子之間的空白,需要相互抵消時。如15px + 20px的margin,將得到20px的空白。 語法: (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; 上、右、下、左外邊距 margin在塊元素、內聯元素中的區別
HTML裏分兩種基本元素,即block和inline。block元素另起一行開始,並獨占一行。inline元素則同其他inline元素共處一行。
在塊元素中:
因此,margin在塊級元素下,上下左右可以隨意設定。且塊級元素的margin的參照基準是前一個元素即相對於自身之前的
元素有margin距離。如果元素是第一個元素,則就是相對於父元素的margin距離。
在內聯元素中:
margin-top和margin-bottom對內聯元素(對行)的高度沒有影響,如果你要改變內聯元素的行高即類似文本的行間距,那
麽你只能使用這三個屬性:line-height,fong-size,vertical-align。請記住,這個影響內聯元素高度的是line-height而不是height。
padding(內邊距)
定義:padding用於元素與內容之間的間隔,讓內容與元素之間有一段內邊距,放生在元素本身內部。 提示:padding: top right bottom left;(padding:10px 20px 30px 40px) 它的給值方式為上,右,下,左。 建議何時應當使用padding:
何時應當時用padding:
需要在border內測添加空白時。
空白處需要背景(色)時。 語法: (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; 上、右、下、左外邊距 padding在塊元素、內聯元素中的區別
HTML裏分兩種基本元素,即block和inline。block元素另起一行開始,並獨占一行。inline元素則同其他inline元素共處一行。
在塊元素中:
因此,padding在塊級元素下,上下左右可以隨意設定,會對元素內部發生改變。
在內聯元素中:
行內非替換元素上設置的內邊距不會影響行高計算;因此,如果一個元素既有內邊距又有背景,從視覺上看可能會延伸到其他
行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值,行內元素的padding元素,只有padding-
left和padding-right有效果,上下不識別;
HTML中padding和margin的區別和用法