img和div宽度不一致问题

今天写代码，遇到一个小问题，我把一张图片放进一个div里，然后没有设置任何的padding和margin，但是发现图片和div的高度不一样，在img的下方出现了3px的空隙。

//html代码
    
     
    
//css代码div{display: inline-block;background-color: red;}img{width: 400px;}

效果如图：很明显能看到图片下面红色背景突出的地方。

审查元素，发现div的高度比img的高度多3px。

通过百度之后了解到产生这个问题的原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。

而解决这个问题的方法也很简单，把img标签的display属性设置为block就好了。

//css代码img{width: 400px;    display:block;}

效果如图：

li间空隙问题

今天遇到的问题让我想到之前还遇到过的一个问题，当我想让ul的li横向排列时，把li的display的属性设置为inline-block，然后就发现，li之间不能紧挨着，有额外的空隙，通过设置padding和margin为0都不能消除这个间隙。

//html代码
    
     
    
      
1
    
      
2
    
      
3
    
      
4
    
      
5
    
      
6
     
    
//css代码div{display: inline-block;background-color: #000;}ul{padding: 0;margin: 0;}li{display: inline-block;list-style-type: none;width: 40px;height: 30px;background-color: red;color: #fff;}

效果图如下：可以清晰看到li之间黑色背景的间隙。

我把margin-right设置为负值-8px之后，间隙才没有了，如下：

通过百度之后，了解到产生这个问题的原因是：浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个

放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决方法也很多：

• 上面把margin设一个负值就是一种消除间隙的方法。
• 给li标签设置浮动。
• 将font-size设置为0，或者将letter-spacing设置为-8px，这种方法会导致其他字符的样式也会受到影响。
• 还有一种在html代码上做修改，不用修改css的方法。加上注释，消除因换行带来的空白字符。如下：

//html代码 <div> <ul> <li>1</li><!-- --><li>2</li><!-- --><li>3</li><!-- --><li>4</li><!-- --><li>5</li><!-- --><li>6</li> </ul> </div>