div吧 关注:16,709贴子:106,510
  • 2回复贴,共1

为什么2个相邻div的margin只有1个生效?

只看楼主收藏回复

前端培训学习中当我们学习到div盒子制作的时候,通常我们会用到margin来调整盒子的外边距,让其在页面中和相邻的元素盒子有一定的距离,使得前端页面更加美观。但是在前端培训过程中有时我们练习的时候通常会出现,代码编写和实际情况不符的我问题。


IP属地:北京1楼2020-11-03 11:03回复
    本例中box1的底部margin为10px,box2的顶部margin为20px,但表现在页面上2者之间的间隔为20px,而不是预想中的10+20px=30px,结果是选择2者之间最大的那个margin,我们把这种机制称之为“外边距合并”;外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。简单列举几点注意事项:


    IP属地:北京3楼2020-11-03 11:04
    回复
      .外边距合并只出现在块级元素上;
      2.浮动元素不会和相邻的元素产生外边距合并;
      3.绝对定位元素不会和相邻的元素产生外边距合并;
      4.内联块级元素间不会产生外边距合并;
      5.根元素间不会不会产生外边距合并(如html与body间);
      6.设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并;


      IP属地:北京4楼2020-11-03 11:05
      回复