HTML中如何解决图片三像素问题？

最新推荐文章于 2023-08-02 18:34:00 发布

忘不了情

最新推荐文章于 2023-08-02 18:34:00 发布

阅读量893

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/y1059477028/article/details/127289622

版权

一、什么叫图片三像素

因为img图片标签是行内块元素，所以在排列图片时图片之间会出现三个像素的缝隙，如下图：

二、如何解决图片之间出现的3像素缝隙问题

1、可以设置其父元素的font-size为0

<style>
    div {
      font-size: 0px;
    }
</style>

<body>
<div>
    <img src="./img1.jpeg" alt="mg1" />
    <img src="./img1.jpeg" alt="mg1" />
  </div>
</body>

2、可以将图片转成块元素

 <style>

    img {
      display:block;
    }
  </style>

<body>
  <div>
    <img src="./img1.jpeg" alt="mg1" />
    <img src="./img1.jpeg" alt="mg1" />
  </div>
</body>

3、vertical-align 设置非baseline默认值即可

img {
      width: 300px;
      vertical-align:top;      
    }

<body>
  <div>
    <img src="./img1.jpeg" alt="mg1" />
    <img src="./img1.jpeg" alt="mg1" />
  </div>
</body>