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

2021-02-25 11:29:55 +08:00
 PeakFish

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

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

990 次点击
所在节点    前端开发
6 条回复
cxe2v
2021-02-25 11:45:55 +08:00
搜索 margin 重叠问题,有你这个问题的答案,还想要深入就去看看 CSS 的 BFC
PeakFish
2021-02-25 11:48:39 +08:00
@cxe2v 层叠问题得至少涉及到两个元素有 margin 吧,这个就一个元素有 margin
akaxiaok339
2021-02-25 11:54:53 +08:00
生效了啊
PeakFish
2021-02-25 11:56:41 +08:00
@akaxiaok339 chrome 最新版?
akaxiaok339
2021-02-25 12:01:12 +08:00
现在 inner 的负 margin 你设置到 div2 效果一样,就是 margin 重叠,加上 border 重叠就消失了
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
PeakFish
2021-02-25 12:08:03 +08:00
@akaxiaok339 感谢,那看来 @cxe2v 大佬是正解了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/756118

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX