Bruce_Zhu 于 2016.10.23
via.https://www.zhihu.com/question/39743047

怎么消除兩個相鄰div之間的空隙

• 遇到的問題如下圖

QQ圖片20161023001930.png

• 具體原因（個人推測）
  在CSS文件最開頭已經通過通用選擇器繼承選擇了padding:0和margin:0，但是仍然會出現這種問題。經過代碼分析可能是將兩個div并排顯示的時候使用了display:online-block的原因，雖然online-block是行內塊元素的屬性，但是它同樣具有塊級元素的屬性，即在font-size不為0的情況下會有大概3px的間隙。這樣推測的原因是在后面的解決方法中可以通過設置父元素的font-size:0來解決。

• 解決辦法
  解決辦法有三種：
  1、通過將兩個div緊密地寫在一起來解決這種問題

7a227e11573632e564705c1cee6ca3f6_r.png

0c861bc077d6ab3975a859cd86e9491a_b.png

0cf347d3ac5704c8f562ce33fb99f81d_b.png

1c9ccb38387ca1e6b2d1d78287ee529e_b.png

2、通過設置父元素的font-size:0來解決這個問題

     *該方法適用于只包含圖片的div*

3、通過margin-left/right:-3px來解決這個問題

    三種方法都可以解決兩個div之間有縫隙的問題，但是從實際角度出發，為了防止不必要的影響的產生，**盡量不要使用第三種方法去解決這一問題，以免產生更加麻煩的后果**