CSS 消除两个图片之间的间隙

2024-01-01 04:17:13

CSS 消除两个图片之间的间隙

文章目录

问题

在布局时,可能会发现两个图片中间有间隙,如下图:
显示页面对应html代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/色图-1.png">
    <img src="images/色图-2.png">
</body>
</html>

它们之中间留有一点空隙.但是并不希望它们中间被隔开,这时我们就要消除空隙.

空隙的实质

图片是一个典型的行内块类元素inline-block (有宽高,但是不会独占一行).

他们之间出现空隙的原因就是—他们中间有一个空格(换行).

html里面的多个连续空白字符(空格/tap/enter),会被当成一个空格来展示.

如果需要去输入多个空格可以用&nbsp,来进行表示;

换行可用标签<br>;

解决方法

1.删除空格

最简单,好理解.

(对于本例) 因为换行导致的空隙,那就不换行就行了

对应html:

<!DOCTYPE html>
<html lang="zh">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    
<body>
    <img src="images/色图-1.png"><img src="images/色图-2.png">
</body>
    
</html>

这种方法,非常直接,但是增加了代码的阅读的难度,除了图片数量少时,一般不使用,但也是一种方法.

2.浮动float

为每张图片都添加浮动,一般是左浮动就行,这样就能保证,两张图片之间不会有任何空隙.

对应html:

<!DOCTYPE html>
<html lang="zh">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fl {
            float: left;
        }
    </style>
</head>
    
<body>
    <img class="fl" src="images/色图-1.png">
    <img class="fl" src="images/色图-2.png">
</body>
    
</html>

3.font-size:0;

当我们把文字尺寸改为0时,所有的文字都会消失不见,包括空格.

所以我们在它的父盒子添加上font-size:0,让里面的每一个空格都消失,这样也可以确保两个图片之间没有空隙.

对应html:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu {
            font-size: 0;
        }
    </style>
</head>

<body>
    <div class="fu">
        <img src="images/色图-1.png">
        <img src="images/色图-2.png">
    </div>
</body>

</html>

font-size:0; 属性会继承给它的所有子元素.如果在其内部的子元素中有需要显示文字的地方,需要重新修改文字尺寸.或者一般也写font-size: initial;来进行初始化文字大小.

文章来源:https://blog.csdn.net/2301_77129582/article/details/135320478
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。