html盒模型margin、padding、border使用

盒模型是在html中非常重要的基础知识，这里主要说一下margin，padding、border使用时会遇到的一些需要注意的情况；如下就是一个标准的盒模型：

margin：

对于块级标签，可以对其设上下左右margin值，对于行级标签而言，只能对其左右设margin，上下不起作用。当两个块级标签上下设margin值时，这两个块级标签上下的距离是取这两个margin值中大得一个，并不会将两个margin值相加的。对于行级标签左右分别设置margin值时，中间的间距是这两个的margin值相加的。需要注意的是，当一个是block属性的标签和一个inline-block的标签上下排列并设置上下margin值时，他们之间的间距是会相加的！！

margin属性还有一个特别需要注意的地方，就是当有子父级两个div时，我们希望子级div相对父级向下移动位置时，可能对子div设置margin-top，但若父级没有触发BFC属性时，对子级设置margin-top，子级位置并不会相对父级下移，而是会带动父级一起向下移动；如下两个图分别是子级没设margin-top和设置margin-top时的显示情况，并不会得到我们想要的效果；当父级有border、float、position：absolute等属性时可以触发BFC属性时，可以用这样的方法，也可以通过设置padding得到我们想要的效果。

<div style="background:red;width:200px;height:200px;">
	<div style="background:blue;width:100px;height:100px;margin-top:50px;">
			
	</div>
</div>

padding：

对于padding来说，改变标签的padding值，会改变标签原始元素的大小，也会影响内容的位置。当有一个div，宽高设为200px；若加上padding：20px；div的内容空间还是200*200不会变化，但加了内边距，这个div的整体大小就会变成240*240.若要这个div还是显示原来的大小，需要将原来的宽高减去padding的值，即宽高改为160px；

  块级标签可以设置上下左右的padding值，但对于行级标签的话，可以设置左右padding值来改变内容位置，当设置上下padding值时，并不会改变内容的位置，只会使行标签的范围变大，还会覆盖别的标签内容。

border：

对于border的使用而言，主要就是注意加了border是占用空间的，在布局的时候需要注意。当给一个div加了border和padding时，这个div的大小实际是设置的宽高加上各自方向的padding值和border值。

这里说了一下margin、padding、border在使用容易遇到的一些问题，若有错误不足之处，欢迎指出，谢谢。