<body>
<div>
<img src="./images/1.jpg" alt="">
</div>
</body>小编在这里添加了一张图片。
当检查时发现div的高度为304px,然而img的高度为300px;如下图：这就是图片四像素的问题。那为什么img会少4个像素呢？
接下来给大家讲解一下四像素的问题：首先让大家看一下什么是顶线、基线、中线、底线
注意：基线并不是汉字文字的下端沿，而是英文字母“”X“”的下端沿。
当我在上面加一行代码时：
<body>
<div>
<img src="./images/1.jpg" alt="">
<span>gggggggggggg</span>
</div>
</body>会出现下面的情况：
大家可以看到红线部分，在没有设置css样式时基线是按照红线的方向进行分割的，因此会多出一部分，其实解决起来很简单，只需设置span的基线位置并让图片垂直居中即可，代码见下：
<style>
img{
vertical-align:middle;
}
span{
vertical-align:bottom;
}
</style>效果图如下：
大家可以看到图片和文本在一条线上，这就解决了四像素的问题；
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
