V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PeakFish
V2EX  ›  前端开发

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

  •  
  •   PeakFish · 2021-02-25 11:29:55 +08:00 · 1007 次点击
    这是一个创建于 1403 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    cxe2v
        1
    cxe2v  
       2021-02-25 11:45:55 +08:00   ❤️ 1
    搜索 margin 重叠问题,有你这个问题的答案,还想要深入就去看看 CSS 的 BFC
    PeakFish
        2
    PeakFish  
    OP
       2021-02-25 11:48:39 +08:00
    @cxe2v 层叠问题得至少涉及到两个元素有 margin 吧,这个就一个元素有 margin
    akaxiaok339
        3
    akaxiaok339  
       2021-02-25 11:54:53 +08:00
    生效了啊
    PeakFish
        4
    PeakFish  
    OP
       2021-02-25 11:56:41 +08:00
    @akaxiaok339 chrome 最新版?
    akaxiaok339
        5
    akaxiaok339  
       2021-02-25 12:01:12 +08:00   ❤️ 1
    现在 inner 的负 margin 你设置到 div2 效果一样,就是 margin 重叠,加上 border 重叠就消失了
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
    PeakFish
        6
    PeakFish  
    OP
       2021-02-25 12:08:03 +08:00
    @akaxiaok339 感谢,那看来 @cxe2v 大佬是正解了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2642 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 15:10 · PVG 23:10 · LAX 07:10 · JFK 10:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.