caopi

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

  •  
  •   caopi · Sep 21, 2018 · 3527 views
    This topic created in 2966 days ago, the information mentioned may be changed or developed.

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

    我就纳闷了

    11 replies  •  2018-09-29 14:57:28 +08:00
    caopi
    caopi
    OP
    Sep 21, 2018
    1
    按道理说,设置了盒模型应该可以包含 margin 了
    caopi
    caopi
    OP
    Sep 21, 2018
    2
    加入 bfc 高度就包含子元素 margin 了,搞不懂了
    rabbbit
    rabbbit
    Sep 21, 2018❤️1
    3
    父元素没有 bord,所以子元素的 margin 跑出去了
    生成 BFC 后,内部元素不受外部影响,就又包括了
    你可以想象 BFC 是个盒子,把里边的都包起来了
    rabbbit
    rabbbit
    Sep 21, 2018
    4
    bord -> border
    ToHaveLight
    ToHaveLight
    Sep 21, 2018
    5
    有可能是垂直外边距重叠了
    FakeLeung
    FakeLeung
    Sep 21, 2018
    6
    父元素:
    border: 1px solid transparent;
    caopi
    caopi
    OP
    Sep 21, 2018
    7
    @rabbbit 没有 border 就会跑出去是怎么回事呢?
    rabbbit
    rabbbit
    Sep 21, 2018❤️1
    8
    边距合并,只要两个 margin 相遇了,他们中间没有东西,就会和并(除 bfc)
    甚至,如果元素没 height/border 只有 margin,上下俩 margin 也会合并
    enjoyCoding
    enjoyCoding
    Sep 21, 2018 via Android
    9
    8 楼正解 搞个 BFC 就好了
    caopi
    caopi
    OP
    Sep 21, 2018
    10
    @rabbbit margin 为 0 也会合并是吗
    supuwoerc
    supuwoerc
    Sep 29, 2018
    11
    外边距折叠的问题吧。。bfc 划块解决之
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1389 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 18:58 · PVG 02:58 · LAX 10:58 · JFK 13:58
    ♥ Do have faith in what you're doing.