CSS盒子的问题

在实际使用中，我们在给盒子设置水平距离的时候是没有问题的，但是在设置垂直距离时会出现，距离嵌套的问题。

这里分别设置上下的margin，但是在页面效果展示的时候，只会展示最大值的那个也就是margin-top：20px，但是margin-botton：10px并不会失效，只不过包含在了20px里面了。

解决方法就是两个盒子设置一个margin即可。

 

 

除了嵌套问题，还有塌陷，这个也很简单，就是块级元素进行嵌套时，子元素的margin-top不仅会作用在子元素身上，也会作用在父元素身上。就是父元素的始终和子元素的保持一样高。

怎么破？

1.给父元素设置border-top和padding-top

2.给父元素设置overflow：hidden

3.子元素转换成行内块元素

4.设置浮动

 

 

 

行内元素在设置margin和padding，只有水平方向的有效，垂直方向的没有效果，也就是left和right有效，top和botton无效，因为行内元素都在同一行。