First, in the vertical direction of the default layout, by default, margins are not superimposed Yes, there will be consolidation phenomenon, whose large margins, who heard; but this situation does not occur in the horizontal direction we give an example
span{
display: inline-block;
width:100px;
height:100px;
border:1px solid red;
}
div{
width:100px;
height:100px;
border:1px solid green;
}
/*我们让span的两个盒子，相距100px*/
.hezi1{
margin-right:50px
}
.hezi2{
margin-left: 50px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:50px;
}
..........省略代码..........
<span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>
<div class="box1">我是span</div>
<div class="box2">我是span</div>
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频Second, the box model
1. What is the box model
A: CSS box model is only a relatively figuratively, HTML tags are all in the box, most of our items are real life the position of zoning.
Note: All HTML tags can all be set up: width height, padding, borders, margins
2. For example:
<style>
span,a,b,strong{
display: inline-block;
width:150px;
height:150px;
padding:20px;
border:2px dotted red;
margin:10px;
}
</style>
........省略代码..........
<span>我是span</span>
<a href="#">我是一个超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
Interpretation: by Google developer tools, we can see, the area of each label belongs numbers between them, they are strictly in accordance with the definition of instructive model of the F12.
2. The width and height of the box model
The width and height (1) content: width \ height set the width and height
Width and height (2) element: the border width and height of the content plus padding plus
(3) the width and height of space elements: rimming margins content plus padding plus the width and height