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

看板Web_Design作者eight0 (人類)時間7年前 (2016/12/15 12:53)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串2/2 (看更多)

先記好，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

12/16 19:12, , 1^F

12/16 19:12, 1^F

‣ 返回看板[ Web_Design ] 網路

‣ 更多 eight0 的文章

文章代碼(AID): #1OKY6jyi (Web_Design)