图片三像素问题

搬砖搬到互联网

于 2023-08-02 18:34:00 发布

阅读量108

点赞数 1

文章标签： css3 css 前端 html5 html

本文链接：https://blog.csdn.net/m0_64204485/article/details/132069006

版权

图片三像素问题

问题描述：

在网页布局的时候，会出现同一个父元素下的两个图片左右两侧有间隙，不同父元素下的图片，其父元素之间会有间隙

代码：

<style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
<body>
    <div class="box1">
        <img src="./images/dog.png" alt="">
        <img src="./images/dog.png" alt="">
    </div>
    <div class="box2">
        <img src="./images/dog.png" alt="">
    </div>
</body>

在这里插入图片描述

在上述代码中，我设置了图片为200*200，div的高度时由内容撑开的，div的高度却是204，这就是所谓的图片三像素问题

如何解决图片三像素问题

方式一：父元素设置font-size:0;

代码：

    <style>
        img{
            width: 200px;
            height: 200px;
        }
        /* 方式一 */
        div{
            font-size:0;
        }
    </style>

在这里插入图片描述

方式二：给图片添加`display:block;`

<style>
        img{
            width: 200px;
            height: 200px;
        }
        /* 方式二 */
        img{
            display: block;
        }
        /* .box1{
            height: 200px;
        }
        .box2{
            height: 200px;
        } */
    </style>

这种方式会导致box1的img掉下去，如果还想保持原来的布局，就需要继续添加浮动或者其他方式。

方式三：给图片设置`vertical-align:非baseline的值`

    <style>
        img{
            width: 200px;
            height: 200px;
        }
        /* 方式三 */
        img{
            vertical-align:top
        }
    </style>

在这里插入图片描述

但是这种方式，图片两个图片之间的还是没有去掉。

方式四：直接给父元素限制高度

    <style>
        img{
            width: 200px;
            height: 200px;
        }
        .box1{
            height: 200px;
        }
        .box2{
            height: 200px;
        }
    </style>
<body>
    <div class="box1">
        <img src="./images/dog.png" alt="">
        <img src="./images/dog.png" alt="">
    </div>
    <div class="box2">
        <img src="./images/dog.png" alt="">
    </div>
</body>

这种方式同方式三，两侧的间隙无法去掉。

方式五：给图片浮动

这种方式比较简单，但是如果浮动就要在父元素清除浮动，比较麻烦。

方式六：给父元素开启弹性盒子

<style>
        img{
            width: 200px;
            height: 200px;
        }
        /* 方式六 */
        .box1,.box2{
            display: flex;
        }
    </style>