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>```