table及div中img下方留白&div宽度随内容而变

昨天实训的同学学习table的时候碰到了一个问题。

1.td里面放了一张img，设置所有内外边距为0，宽高不设，图片底下有一条白边。

问题扩展：查阅之后发现在div内也有此问题，但是因为平时div一般不显示边框所以一直没注意到这个细节。

如图：

上为td中img，下图为div中的img。

查阅之后发现是css中的基线问题：

解决方法：

1.设置父元素的font-size设置为0。

2.设置父元素的line-height设置为0或1。

3.设置img的display为block。

书中给出的方法为font-size和line-height同时为1；单独设置任何一个为0都可以实现效果。会产生什么负面影响待验证。

display为block在多张图片时需要设置相应的浮动以及overflow。会比较麻烦

验证inline-block并无法生效。

2.div随内容宽度自适应。

查阅得知设置div{width:auto;display:inline-block!important;display:inline}

经测试发现，只对div设置display:inline-block;即可达到想要的效果。

上面的再设置display：inline不知道是因为什么，希望朋友们能指出谢谢。