margin和padding的區(qū)別
margin是指從自身邊框到另一個容器邊框之間的距離颓哮,就是容器外距離铃芦。(外邊距)
padding是指自身邊框到自身內(nèi)部另一個容器邊框之間的距離,就是容器內(nèi)距離。(內(nèi)邊距)
一商佑、margin
1、語法結(jié)構(gòu)
(1)padding-left:10px; /margin-left:10px; ? 左內(nèi)/外邊距
(2)padding-right:10px; /margin-right:10px;? 右內(nèi)/外邊距
(3)padding-top:10px; /margin-top:10px;? ? ? 上內(nèi)/外邊距
(4)padding-bottom:10px; /margin-bottom:10px;? ? ? ? ? ? 下內(nèi)/外邊距
(5)padding:10px;/ margin:10px;? ? ? ? ? ? ? ? ? ? ? ? ? ?四邊統(tǒng)一內(nèi)/外邊距
(6)padding:10px 20px; /margin:10px 20px;? ?上下厢塘、左右內(nèi)/外邊距
(7)padding:10px 20px 30px;/margin:10px 20px 30px;? ? ? ?上茶没、左右、下內(nèi)/外邊距
(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上晚碾、右抓半、下、左內(nèi)/外邊距
2迄薄、可能取的值
(1)length 規(guī)定具體單位記的外邊距長度
(2)% 基于父元素的寬度的外邊距的長度
(3)auto 瀏覽器計算外邊距
?margin:0 auto琅关;? 只對塊級元素起作用
在塊元素中:?margin在塊級元素下煮岁,上下左右可以隨意設(shè)定讥蔽。
?在內(nèi)聯(lián)元素中:margin-top和margin-bottom對內(nèi)聯(lián)元素(對行)的高度沒有影響,如果你要改變內(nèi)聯(lián)元素的行高即類似文本的行間距画机,那 么你只能使用這三個屬性:line-height冶伞,fong-size,vertical-align步氏。請記住响禽,這個影響內(nèi)聯(lián)元素高度的是line-height而不是height。
?二、padding:
?注意:將Padding設(shè)置為負(fù)值無效:
?在塊元素中:padding在塊級元素下芋类,上下左右可以隨意設(shè)定隆嗅,會對元素內(nèi)部發(fā)生改變。
在內(nèi)聯(lián)元素中:行內(nèi)元素的padding元素侯繁,只有padding- left和padding-right有效果胖喳,上下不識別;