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

求教,父元素不包括子元素的 margin 是怎么回事?

  •  
  •   caopi · 2018-09-21 10:20:40 +08:00 · 2676 次点击
    这是一个创建于 2256 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我设置了 box-sizing: border-box;但是父元素高度只等于子元素的内容高度,不包括 margin 的高度。

    我就纳闷了

    11 条回复    2018-09-29 14:57:28 +08:00
    caopi
        1
    caopi  
    OP
       2018-09-21 10:21:11 +08:00
    按道理说,设置了盒模型应该可以包含 margin 了
    caopi
        2
    caopi  
    OP
       2018-09-21 10:34:59 +08:00
    加入 bfc 高度就包含子元素 margin 了,搞不懂了
    rabbbit
        3
    rabbbit  
       2018-09-21 10:47:49 +08:00   ❤️ 1
    父元素没有 bord,所以子元素的 margin 跑出去了
    生成 BFC 后,内部元素不受外部影响,就又包括了
    你可以想象 BFC 是个盒子,把里边的都包起来了
    rabbbit
        4
    rabbbit  
       2018-09-21 10:48:14 +08:00
    bord -> border
    ToHaveLight
        5
    ToHaveLight  
       2018-09-21 11:21:32 +08:00
    有可能是垂直外边距重叠了
    FakeLeung
        6
    FakeLeung  
       2018-09-21 11:26:56 +08:00
    父元素:
    border: 1px solid transparent;
    caopi
        7
    caopi  
    OP
       2018-09-21 11:50:08 +08:00
    @rabbbit 没有 border 就会跑出去是怎么回事呢?
    rabbbit
        8
    rabbbit  
       2018-09-21 12:19:02 +08:00   ❤️ 1
    边距合并,只要两个 margin 相遇了,他们中间没有东西,就会和并(除 bfc)
    甚至,如果元素没 height/border 只有 margin,上下俩 margin 也会合并
    enjoyCoding
        9
    enjoyCoding  
       2018-09-21 12:21:38 +08:00 via Android
    8 楼正解 搞个 BFC 就好了
    caopi
        10
    caopi  
    OP
       2018-09-21 18:28:35 +08:00
    @rabbbit margin 为 0 也会合并是吗
    supuwoerc
        11
    supuwoerc  
       2018-09-29 14:57:28 +08:00
    外边距折叠的问题吧。。bfc 划块解决之
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1235 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:36 · PVG 01:36 · LAX 09:36 · JFK 12:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.