子盒子加外边距,父盒子跟着移动的解决方法

发布网友发布时间：2023-04-03 19:56

共1个回答

热心网友时间：2024-11-20 20:48

做项目的时候在最大的div里嵌套了一个小的div，给小的div设置margin的时候，大盒子一起掉下来，然后百度找问题，找到了
给子元素盒子增加垂直外边距margin-top时，会导致父元素盒子与子元素盒子边界重叠而导致父元素盒子也往下走
解决办法：
1、修改父元素的高度，也就是时设置父元素盒子的内边距，增加padding-top样式模拟（padding-top：1px；常用）

2、为父元素添加边框线border（border:1px solid transparent可用）

3、为父元素添加溢出隐藏属性 overflow ：hidden；样式即可（完美）

4、为父元素或者子元素声明浮动（float：left；可用）

5、为父元素或者子元素声明绝对定位（position:absolute;）