美文网首页
margin塌陷解决方法

margin塌陷解决方法

作者: 飞不起的小鸟 | 来源:发表于2020-05-12 14:27 被阅读0次

当为子盒子添加margin-top:10px;##

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙(即父级盒子往下塌陷了10px)。

解决方法:
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素
.son:before{ content:""; overflow:hidden; }

相关文章

  • 小技巧合集之css

    01 修改placeholder样式 02 margin合并/塌陷问题解决方法 具体详见:margin合并/塌陷问题

  • 【前端基础5.0】CSS-如何解决margin塌陷问题

    文/Jack同学 margin塌陷问题在布局开发的过程中也是经常遇到,原理和解决方法都不难。那margin塌陷是什...

  • margin塌陷解决方法

    当为子盒子添加margin-top:10px;## 子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子...

  • 两个经典Bug及其解决方法

    margin塌陷:当父元素包裹着子元素时,垂直方向的margin取两者之中较大的数值。解决方法:1.给父元素设置一...

  • margin塌陷

    margin塌陷 margin塌陷发生在下列两种情况中 1.垂直并列 对box1我们为其设置margin-bott...

  • margin塌陷问题及解决方法

    一:什么是margin塌陷 ?在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,...

  • margin 塌陷问题

    margin 塌陷问题 在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现...

  • 关于margin塌陷和margin合并问题解决

    margin塌陷 当给一个块级元素的第一个子元素设置margin-top时会带动父级盒子一起下移 解决方法: 给父...

  • margin塌陷问题

    一:什么是margin塌陷 在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),两个marg...

  • margin塌陷问题

    今天在CSS3练习弹性盒子中想起了margin的塌陷问题。在这里回忆一下.... margin 塌陷是在父级相对于...

网友评论

      本文标题:margin塌陷解决方法

      本文链接:https://www.haomeiwen.com/subject/inybnhtx.html