img标签的和父类div高度不一致问题

问题原由：

html: 

css: div{border:1px solid black;}

       img {border:1px solid red;}

结果发现div会比img高度多几px，令人费解。

状况分析：

出现此等情况一般想法是从当前div以及div继承的属性考虑，而比较令人怀疑的标签一般有：float margin padding border width height line-height等。

结果：

发现body下有一段是line-height:1; 将其设置为line-height:0即能解决问题。

ps：body设置line-height:0 和不设置line-height属性其实是有很大的区别的。

延伸：

还有几种解决方案待参考：

• img{vertical-align:top;} 

• img{display: block} 

• div{line-height: 0}

• img{float:left}

原因是img标签是inline，将部分属性改之后会迫使其模拟或变成display:block。