外邊距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>
在浏覽器預覽效果如下：