垂直外邊距的問題，想來大家都在開發過程中遇到過，那麼今天就來集中解析一下。
外邊距合併（疊加）是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖引用自w3c：
這是乙個基本的垂直外邊距合併的乙個概念。
那麼在開發過程中遇到最多的乙個問題是什麼呢？
就是兩個垂直方向上的元素無論是否存在外邊距時，當下面的第二個元素沒有上留白（padding）或上邊框（border－top）時，假如此元素的第乙個子元素存在且設定上邊距時，這時會產生子元素設定的上邊距應用到了父元素對於第乙個垂直方向上的元素的上邊距上。
即那麼這個父元素盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
看如下圖和**：
可以看到，明明沒有設定first 和 second 倆個div之間的外邊距，只給second的子元素son設定了上邊距就產生了這個問題？
那麼如何解決呢。
解決方案1:
為父元素增加乙個border-top或者padding-top 或者over:hidden;即可解決這個問題
1）但是都存在缺點，設定border－top，無緣無故多了乙個上邊框的寬度出來
2）設定padding－top，計算高度的時候無緣無故多了
3）設定overflow：hidden；假如存在需要超出元素框的內容時，將失效。
那麼什麼方法是最好的呢？ 我們回過頭來看一下產生這個問題的根本原因：父元素盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊！！！
這裡的解決方案將用到乙個偽類標籤 :before，即second:before,在second元素框中的最前面預設新增乙個內容，使得son元素不成為second的第乙個子元素就可以了。
那麼我們就來試一試在內部樣式表中新增這一段**：
#second:before
再次重新整理頁面，發現此時垂直外邊距的問題已解決：
其實只要抓住了問題的本質，就可以輕鬆的解決這類的問題。（與之類似的還有乙個清除自身浮動帶來的影響也是如此，只要新增的**段中，再加一行clear:both;即自己的問題自己解決，不影響其他的元素）。
有興趣的小夥伴可以自己試一試哦～
高度塌陷與垂直外邊距重疊的解決方式
意思是 文件流中父元素高度預設被子元素撐開，但子元素設定浮動以後，就會脫離文件流，導致子元素無法撐起父元素高度，父元素則會高度塌陷，父元素下的所有元素都會向上移動，導致頁面布局混亂 解決方式 1.為將元素的over flow設定為乙個非visible 預設 的值 over flow hidden 元...
垂直居中的解決方案
下面是比較專業的垂直居中的集中解決方案。記錄於此，以便查閱。1 單行垂直居中 文字在層中垂直居中vertical align 屬性是做不到的.我們這裡有個比較巧妙的方法就是 設定height的高度與line height的高度相同 example source code www.52css.com ...
CSS垂直居中解決方案
博主回來了。本來在github上布了blog，後面換公司，部落格md檔案都忘記拿走了 乙個原先同學問我 css怎麼垂直居中呀 一看就沒好好學習過。盆友們可能有的只是需要 自己去拿吧 這是針對image的 我也懶得改了 我所知道的4種方式 其他的不是不行，而是我不常用 容器 父元素 line heig...