|
垂直外邊距合并問題
別被上面這個名詞給嚇倒了，簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個基本知識。
實(shí)際工作中，垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問題，IE下反而表現(xiàn)良好。例子可以查看下面代碼(IE下表現(xiàn)“正�！�，標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”)：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實(shí)是一個錯誤的表現(xiàn)，因?yàn)镮E的hasLayout渲染導(dǎo)致了這個“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會表現(xiàn)出“有問題”的外觀。好了，如果你讀過了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個問題了。這個問題發(fā)生的原因是根據(jù)規(guī)范，一個盒子如果沒有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內(nèi)部文檔流中的第一個子元素的上邊距重疊。
再說了白點(diǎn)就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個有效的 border或者padding就可以有效的管制這個目無領(lǐng)導(dǎo)的margin防止它越級，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。
對于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。
一般說來這個問題解釋到這里，大多數(shù)文章就不會再深入下去了，但作為一名實(shí)戰(zhàn)開發(fā)者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這么一個解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個父子垂直外邊距合并這個CSS規(guī)范“Bug”，而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會忘記這條準(zhǔn)則，而且在頁面設(shè)計(jì)稿里如果不需要 border-top加個上邊框，這么一加反而畫蛇添足，為以后修改留下隱患。
為什么一定要用border-top,padding-top去為了這么一個所謂的標(biāo)準(zhǔn)規(guī)范而多寫這么一行代碼呢？答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。
用Margin還是用Padding
何時應(yīng)當(dāng)使用margin：
需要在border外側(cè)添加空白時。
空白處不需要背景（色）時。
上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。
何時應(yīng)當(dāng)時用padding：
需要在border內(nèi)測添加空白時。
空白處需要背景（色）時。
上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px + 20px的padding，將得到35px的空白。
個人認(rèn)為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。
這里我截取了部分另外一篇文章的內(nèi)容，詳細(xì)內(nèi)容請見用Margin還是用Padding
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 不要告訴我你懂margin [1] 下一頁 不要告訴我你懂margin [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 不要告訴我你懂margin [2]
