外邊距margin,指的是邊框到父元素或者同級元素之間的那一部分。
從CSS盒子模型中,我們可以看出,內邊距分為四個方向的內邊距:margin-top、margin -right、margin -bottom、margin -left。這一點跟內邊距padding非常相似。
語法:
margin-top:像素值; margin-right:像素值; margin-bottom:像素值; margin-left:像素值;
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS外邊距margin屬性</title> <style type="text/css"> #main { display:inline-block;/*將塊元素轉換為inline-block元素*/ border:1px solid #CCCCCC; } .lvye { display:inline-block; /*將塊元素轉換為inline-block元素*/ padding:20px; margin-top:20px; margin-right:40px; margin-bottom:60px; margin-left:80px; border:1px solid red; background-color:#FCE9B8; } span{border:1px solid blue;background-color:#C5FCDF;} </style> </head> <body> <div id="main"> <div class="lvye"><span> 學習網</span></div> </div> </body> </html>
在浏覽器預覽效果如下:
margin跟padding一樣,也有簡潔寫法。我們可以使用margin屬性來設置四個方向的外邊距。在實際編程中,我們往往使用的是margin的這種高效簡潔寫法來編程。
margin寫法有3種,分別如下:
語法:
margin:像素值; margin:像素值1 像素值2; margin:像素值1 像素值2 像素值3 像素值4;
例如:
“margin:20px;”表示四個方向的外邊距都是20px;
“margin:20px 40px;”表示margin-top和margin-bottom為20px,margin-right和margin-left為40px。
“margin:20px 40px 60px 80px;”表示margin-top為20px,margin-right為40px,margin-bottom為60px,margin-left為80px。大家按照順時針方向記憶就可以了。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS外邊距margin屬性</title> <style type="text/css"> #main { display:inline-block;/*將塊元素轉換為inline-block元素*/ border:1px solid #CCCCCC; } .lvye { display:inline-block; /*將塊元素轉換為inline-block元素*/ padding:20px; margin:40px 80px; border:1px solid red; background-color:#FCE9B8; } span{border:1px solid blue;background-color:#C5FCDF;} </style> </head> <body> <div id="main"> <div class="lvye"><span> 學習網</span></div> </div> </body> </html>
在浏覽器預覽效果如下: