Re: [問題] CSS margin-top的問題

[eight0 (人類)]

先記好，margin 的意義是留白


假如兩個 block 長這樣︰

        <div class="a">Hello</div>
        <div class="a">Hello</div>

對 .a 指定「上下留白 30px」，兩個 block 之間的留白有多高？

30px，符合預期。對任意一個 block 來說，上下的確都有了 30px 的留白


若是長這樣︰

        <div class="a">Hello</div>
        <div class="b">
                <div class="c">Hello</div>
                <div class="c">Hello</div>
        </div>

並且對 .b, .c 指定「上下留白 30px」，
.a 和 .b 之間的留白有多高？.a 和 .c 之間的留白有多高？

30px，符合預期。對 .b 和 .c 來說，上下的確都有了 30px 的留白


總之，這不是一個「不如預期」的規範。下面直接引用 spec 的說明

> In CSS, the adjoining margins of two or more boxes (which might or might
> not be siblings) can combine to form a single margin. Margins that combine
> this way are said to collapse, and the resulting combined margin is called
> a collapsed margin.


http://codepen.io/eight04/pen/eBQvWR
上面的連結包括 margin collapsing 的範例和一些解法。用 inline-block 的確可以
避免這個現象（因為這個特性是 block 獨有），但我認為只因這個理由就把本來是
block 的東西設為 inline-block 不太適合。

--
                                      ▉▏                                      
                                      ▉▏                                      
                                   ◢ ▊▎ ◣                                   
                                  ◤ ▄▆▄ ◥ 　                               
                                 ◥ ◥    ◤ ◤                                 
                                   ▄      ▄                                   

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.160.124.204
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1481777581.A.F2C.html
推 i94eric: 推