div包含的img底部多出空白，怎么办？

1. 给img的容器加　　　　font-size: 0;
2. 对img                             display: block;
3. 对img　　                      vertical-align: top;

 

突然想起张鑫旭《css世界》，说这个空白产生的原因：img空白节点的存在，空白节点的行高，字体大小导致的。（描述不知道有没有问题，欢迎指出错误）

　　所以还有第四种解决办法

　　4.对img的容器　　　　      line-height: 0;

　　5.或者标签img和下一个兄弟元素标签，不要换行，直接拼接

　　例如：

　　一、这个有空白节点存在于 img 和 span 之间

　　<div>

　　　　<img src="hh.png" />

　　　　<span>换行</span>

　　</div>

　　二、这个没有空白节点

　　<div><img src="hh.png" /><span>换行</span></div>

 

 

参考链接：div里包含img底部必定多出空白的解决办法