為什么寫#box1{margin-bottom:30px;} 可以實現兩個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,對應的是盒子外邊界的距離。至于為什么只設置一個，可以這樣想：比如兩個人a，b前后緊挨著，我只需要拉開a或者b的距離就可以實現把兩人的距離來開。我們把a的后面定義為底部（bottom）或者b的前面定義為頂部（top），只要將a的bottom或者b的top拉開一段距離就可以了。對應box1,也是一樣的?？梢孕薷臑?box2的top：30px；
2017-06-27
因為只有兩個，只要第一個有下邊距就可以了。同理，如果有三個
<div id="box1">box1</div>
<div id="box2">box2</div> ??
<div id="box3">box3</div>，就寫兩個
#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;}，設置box1這個盒子的底部外邊距為30個像素，即在box1和box2之間填充了30個像素的距離。#box2{margin-bottom:30px;}是設置box2這個盒子的底部外邊距為30個像素，這是沒必要的。
2017-06-27
邊界距離就是元素與元素之間，因此只需要寫一個box1就行了，默認的就是兩box1與box2的距離。
2017-06-27
box1的塊級元素高度要再加上margin-bottom:30px; 意思 是在他的外下邊界多了30px空間， 不加box2那是因為沒有必要 你加下#box2{margin-bottom:30px;} ?如果 再在下面添加元素就會發現位置又多了個30邊距
<div id="box1">box1</div>
? ? <div id="box2">box2</div> ??
?? <div id="box3">box3</div> ??