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无效,因为行内元素都在同一行。

posted @ 2022-07-19 11:17  漫步火星  阅读(138)  评论(0编辑  收藏  举报