解决图片三像素问题

什么是图片三像素问题

主要是指在页面上图片和文本,或其他行内标签与数据在页面上水平方向的对齐方式问题

例如：

 

解决方法

一、使用vertical-align 设置元素垂直对齐的方式

vertical-align可以设置的参数有

baselin 基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐

设置一个非baselin即可：

        img{
            vertical-align: bottom;
        }

二、设置父元素font-size属性为0

设置一个父元素包裹多个img图片

然后设置

    div{
      font-size: 0;
    }

效果如上图↑

注意：设置父元素的font-size属性为零可以实现图片 行内 左右没有像素间距

例：

三、使用display属性将图片转换为块元素

设置img的display为block

        img{
            display: block;
        }

效果如图二↑

！当然，也可以使用margin调整距离，脱离文档流等。