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),会被当成一个空格来展示.
如果需要去输入多个空格可以用
 
,来进行表示;换行可用标签
<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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!