美文网首页
简单理解css中的盒子外边距垂直方向上的合并问题

简单理解css中的盒子外边距垂直方向上的合并问题

作者: 小小部落大大酋长 | 来源:发表于2019-02-16 21:44 被阅读0次

简单地说,外边距合并指的是,当两个垂直方向上的外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
个人理解:不是相遇而是相连。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。如下:


1.gif

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。如下:


2.gif
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
3.gif
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
4.gif

总的来说就是:一个外边距与另一个外边距相连时(只要有部分挨在一起),然后在垂直方向上有外边距合并;

相关文章

  • 简单理解css中的盒子外边距垂直方向上的合并问题

    简单地说,外边距合并指的是,当两个垂直方向上的外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生...

  • 解决外边距margin在垂直方向上合并的问题

    解决外边距margin在垂直方向上合并的问题 问题描叙:有一个big盒子,里面嵌套一个small盒子,本来想让sm...

  • 前端笔记——CSS常见问题及解决方案

    问题一:外边距合并问题 问题描述:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的...

  • margin(垂直外边距合并、margin负值)

    垂直外边距合并的问题 外边距合并出现的三个场景 同一个BFC,且同处于普通流中的垂直相邻元素外边距合并 父子元素的...

  • CSS垂直外边距合并

    1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。 外边距合并指的...

  • CSS盒子模型

    外边距margin的合并现象:在垂直方向上,如果有两个相邻的外边距,就会发生外边距合并现象。 在默认布局的水平方向...

  • 盒子模型

    标准盒模型 IE盒模型 盒模型的转化 css 外边距合并 上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外...

  • 外边距塌陷之clearance

    在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级...

  • 背景

    一.盒模型(div) 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高...

  • inline-block、BFC、边距合并

    外边距合并及破解方法 同一个BFC中常规文档流的两个在垂直方向“相邻”的块级盒子会出现外边距合并。 两个外边距都是...

网友评论

      本文标题:简单理解css中的盒子外边距垂直方向上的合并问题

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