美文网首页
关于margin塌陷和margin合并问题解决

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

作者: consolelog | 来源:发表于2019-08-04 06:51 被阅读0次

margin塌陷

当给一个块级元素的第一个子元素设置margin-top时会带动父级盒子一起下移

解决方法:

  1. 给父级盒子设置border:1px solid transparent;box-sizing: border-box;
  2. 在第一个子元素前面加一个<table></table>
  3. 给父级盒子设置padding属性来代替margin

(以上三种方法,不推荐使用)

  1. 触发BFC(块级格式上下文),改变父级渲染规则。一下四种方法都可以实现,但是各自都有各自的缺点,可根据实际情况选择合适的方法。
position:absolute/fixed;

display:inline-block;

float:left/right;

overflow:hidden;

margin合并由于并没有影响到大体结构,一般在制作项目的时候,把上下间距算成一个即可。

相关文章

  • 小技巧合集之css

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

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

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

  • html css

    1.margin 塌陷,与margin合并 margin合并不解决,直接设置一个box的margin即可 marg...

  • 理解margin塌陷和margin合并及其解决方案

    理解margin塌陷和margin合并及其解决方案[https://juejin.cn/post/69762723...

  • margin塌陷、margin合并与BFC

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

  • margin合并/塌陷问题

    外边距合并的几种情况 所谓的外边距合并就是,当两个垂直外边距相遇时,它们将形成一个外边距。合并的外边距的高度等于两...

  • margin合并

    以前学上下方向上margin会合并,就是单纯的知道,margin塌陷了,要形成BFC overflow:hidde...

  • css(3)

    18、什么是盒子模型?IE的盒子模型有什么不同的? 19、margin塌陷问题和合并 (一般margin合并不解决...

  • cssmargin合并+浮动

    margin塌陷,通过改变css解决 margin合并,即兄弟元素a的下边界顶100,b的上边界顶100,但是二者...

  • BFC与margin塌陷/合并

    margin塌陷 父子嵌套元素在垂直方向的margin,子元素总是与父元素贴合在一起,他们两个的margin会取其...

网友评论

      本文标题:关于margin塌陷和margin合并问题解决

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