作者evenwu (EvenWu)
看板Web_Design
標題Re: [問題] margin/padding 使用時機??
時間Fri Nov 30 12:08:14 2012
※ 引述《asshole88 (愛嘶猴)》之銘言:
: 謝謝各位~
: 不過我比較有疑問的是如以下的狀況
: <div id="a">
: <div id="b">BB</div>
: <div id="c">CC</div>
: </div>
: <div id="d">
: </div>
: 如果要依以上排版,我應該要設定a的padding
: 還是設定b、c的margin比較適當呢?
: a、d的話,我是會用margin來區隔
: 只是像巢狀的div,不太確定該用哪個
: 謝謝~
這問題真的頗高階的
如果東西不是很複雜...
我通常建議
margin 可以的話... 設在外層
padding 設在最裡層
如果你外層裡層都有設 margin
會出現奇怪現象
就是外層的 margin 跟裡層的 margin 重疊
你要他不重疊就設 clear 或是 self clear fix
但偏偏很多瀏覽器對於內外層 margin 重疊的判定作法不同
這個就不是純粹 box model 能夠理解的了
然而你若把外層跟裡層的元素設個 padding 或是 border
就會突然不重疊了... 畢竟中間有卡東西嘛!
如果兩個元素之間,有一個 height 0px 的東西呢?
嗎的,每個瀏覽器又不同了
所以老話一句
真的要知道自己在幹嘛才幹嘛
不然自找麻煩真的很痛苦 de de debug 到死
這文可能說明的不太清楚
但我已經被這個現象罷凌過數百次了
對於犯人的描述不是很理性
真抱歉
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.100.58
推 rettamkrad:推霸凌....orz 11/30 13:28
推 asshole88:所以b、c不要設margin,用a的padding來排版較適合是嗎? 11/30 14:09
推 EROS4:a設padding b設margin c什麼都不要設 11/30 15:26
→ EROS4:ok 講細一點 a設padding b只設margin-right c都不要設 11/30 15:27
推 sycc:最後一段好好笑XD 11/30 15:53
→ Rplus:最末段讚XD 12/01 16:57