- margin的使用
- margin的疊壓現象
- margin的子債父償現象
margin的使用
先來看下代碼和效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin</title>
<style>
/*清空標簽默認樣式*/
body,div {
border: 0;
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
/*使用外邊距*/
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
margin的使用與padding相似（margin后邊也可跟1-4個值，具體作用請參考padding）
ok,不多說簡單使用了，但是在使用margin的時候一定要注意如下兩種情況：
1. 同級間，左右相加，上下疊壓；
2. 父子級，對第一個子級使用margin-top會出現子債父償現象。
margin的疊壓現象
在解釋什么是疊壓之前，先看段代碼：
.div1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.div2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 30px;
}
在這里.div1與.div2是同級的div，那么二者肯定是上下結構的，問題是此時二者之間的距離是多少像素？80px？還是40px？答案是50px，因為此時有疊壓現象，說白了就是誰的值大就是多少。
我們來想這樣的一個例子，古代的劍客在功力高深的時候會給人一種有jian氣的感覺??，假設A劍客的jian氣半徑是50米，B劍客的jian氣是30米，那么二者之間的安全距離是多少呢？答案是50米對不對！
在web中我們稱這種現象為外邊距的疊壓現象。
margin的子債父償現象
依舊還是先看段代碼，不過這次又效果哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin</title>
<style>
/*清空標簽默認樣式*/
body,div {
border: 0;
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: orange;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top:10px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
margin-top添加在.son選擇其中，按理說效果應該是.son(紅色塊)距離.father(橘黃色塊)的頂部10px，但是如果真的是這樣，茶哥兒會單獨拿出來講么？沒關系我們來看效果就知道了：
我們會發現.son相對于.father并沒有間距，相反.father卻距離body有了10px的上邊距，我們稱此時發生了子債父償現象。通俗易懂哈，就是兒子沒有能力償還債務所以只能老子來善后了。
這種現象是有問題的，我們在開發中一定要避免這種事情的發生，我們有三種比較成熟的方案來避免這個現象：
1. 為父級添加一個border；
2. 位父級添加一個新的屬性overflow:hidden;
3. 不適用margin，在父級中使用padding-top。
注意：子債父償現象只會發生在對第一個子級使用margin-top時發生。
創造即永恒，喝茶去……
