div之間有間隙以及img和div之間有間隙的原因及解決方法

原因：

div 中 存在 img標簽，由於img標簽的 display:inline-block 屬性。

      display:inline-block布局的元素在chrome下會出現幾像素的間隙，原因是因為我們在編輯器里寫代碼的時候，同級別的標簽不寫在同一 行以保持代碼的整齊可讀性，即inline-block布局的元素在編輯器里不在同一行，即存在換行符，因此這就是著名的inline-block“換行 符/空格間隙問題”。如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙才是不正常的（IE6/7 block水平元素）。

解決方法：

1、把img標簽的display屬性改成block：

img{dispaly:block;}

 

 

2、把div中的字體大小設為0：

div{font-size:0;}

 

 

 

3、修改img的vertical-align屬性：

 

img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}