未分類
8 3 月 2021

web 前端来看看这个例子，浏览器这是什么情况。

web 前端来看看这个例子，浏览器这是什么情况。

資深大佬 : PeakFish 3

里面这个元素的 margin 负值为啥不生效？

例子在 codepen，https://codepen.io/PeakFish/pen/GRNyOrd

大佬有話說 (6)

  • 資深大佬 : cxe2v

    搜索 margin 重叠问题，有你这个问题的答案，还想要深入就去看看 CSS 的 BFC

  • 主 資深大佬 : PeakFish

    @cxe2v 层叠问题得至少涉及到两个元素有 margin 吧，这个就一个元素有 margin

  • 資深大佬 : akaxiaok339

    生效了啊

  • 主 資深大佬 : PeakFish

    @akaxiaok339 chrome 最新版？

  • 資深大佬 : akaxiaok339

    现在 inner 的负 margin 你设置到 div2 效果一样，就是 margin 重叠，加上 border 重叠就消失了
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

  • 主 資深大佬 : PeakFish

    @akaxiaok339 感谢，那看来 @cxe2v 大佬是正解了