為什么寫#box1{margin-bottom:30px;} 可以實(shí)現(xiàn)兩個(gè)div而不寫#box1{margin-bottom:30px;}#box2{margin-bottom:30px;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊距</title>
<style type="text/css">
div{
? ? width:300px;
? ? height:300px;
border:1px solid red;
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
? ? <div id="box1">box1</div>
? ? <div id="box2">box2</div> ??
</body>
</html>
2017-06-27
margin,對應(yīng)的是盒子外邊界的距離。至于為什么只設(shè)置一個(gè)，可以這樣想：比如兩個(gè)人a，b前后緊挨著，我只需要拉開a或者b的距離就可以實(shí)現(xiàn)把兩人的距離來開。我們把a(bǔ)的后面定義為底部（bottom）或者b的前面定義為頂部（top），只要將a的bottom或者b的top拉開一段距離就可以了。對應(yīng)box1,也是一樣的。可以修改為 box2的top：30px；
2017-06-27
因?yàn)橹挥袃蓚€(gè)，只要第一個(gè)有下邊距就可以了。同理，如果有三個(gè)
<div id="box1">box1</div>
<div id="box2">box2</div> ??
<div id="box3">box3</div>，就寫兩個(gè)
#box1{margin-bottom:30px;}
#box2{margin-bottom:30px;}
2017-06-27
#box1{margin-bottom:30px;}
表示box1和下面box2間距是30px，而
#box2{margin-bottom:30px;}
表示和box2和下面邊緣距離為30px，這是距離是無限大切且不可控，屬于無效代碼，效果和僅僅寫
#box1{margin-bottom:30px;}
的效果一樣的
2017-06-27
#box1{margin-bottom:30px;}，設(shè)置box1這個(gè)盒子的底部外邊距為30個(gè)像素，即在box1和box2之間填充了30個(gè)像素的距離。#box2{margin-bottom:30px;}是設(shè)置box2這個(gè)盒子的底部外邊距為30個(gè)像素，這是沒必要的。
2017-06-27
邊界距離就是元素與元素之間，因此只需要寫一個(gè)box1就行了，默認(rèn)的就是兩box1與box2的距離。
2017-06-27
box1的塊級(jí)元素高度要再加上margin-bottom:30px; 意思 是在他的外下邊界多了30px空間， 不加box2那是因?yàn)闆]有必要 你加下#box2{margin-bottom:30px;} ?如果 再在下面添加元素就會(huì)發(fā)現(xiàn)位置又多了個(gè)30邊距
<div id="box1">box1</div>
? ? <div id="box2">box2</div> ??
?? <div id="box3">box3</div> ??