img和div的宽度不一样问题和li之间空隙问题的解决方案
img和div宽度不一致问题
今天写代码，遇到一个小问题，我把一张图片放进一个div里，然后没有设置任何的padding和margin，但是发现图片和div的高度不一样，在img的下方出现了3px的空隙。
//html代码
<div><img src="img/test.jpg"></div>
//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代码
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
//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的方法。加上注释，消除因换行带来的空白字符。如下：
<div>
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li><!--
--><li>5</li><!--
--><li>6</li>
</ul>
</div>```