当前位置： 移动技术网 > IT编程>网页制作>HTML > 解决img元素显示图片之间的空隙

解决img元素显示图片之间的空隙

2020年07月17日  | 移动技术网IT编程  | 我要评论

一：问题

问题图片：作者：汽水配辣条
图中的三个图片之间有明显的空隙。即便是将外边距设为0，也没有效果。

问题代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div>img {
			margin:0px;
		}
	</style>
</head>
<body>
	<div>
		<img src="pic/print-01.jpg" /> <img src="pic/print-02.jpg" />
		<img src="pic/print-01.jpg" />
	</div>

</body>
</html>

二：空隙的来源

在问题代码中，三个img元素之间有空格（内联元素的换行默认为空格），导致在问题图片中，也出现空隙。经过测验，一个空隙的宽度为5px。

三：解决办法

方法一：除去空格。
作者：汽水配辣条

<div>
	<img src="pic/print-01.jpg" /><img src="pic/print-02.jpg" /><img src="pic/print-01.jpg" />
</div>

但是，方法一只能用在图片少的情况下。如果显示多个图片，多个img元素挨着一起，非常影响代码的阅读。所以推荐第二种方法。

方法二：使用float元素将float元素设为left，使图片无间隙的向左排列。

作者：汽水配辣条

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div>img {
			float: left;
		}
	</style>
</head>
<body>

	<div>
		<img src="pic/print-01.jpg" />
		<img src="pic/print-02.jpg" />
		<img src="pic/print-01.jpg" />
	</div>

</body>
</html>

四：其他：

在有空隙的时候，使用margin-right属性，会在原有空隙的基础上加上属性值。一个空隙为5px。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div#a>img {	
			margin-right: 5px;
		}

		div#b>img {
			float: left;
			margin-right: 5px;
		}
	</style>
</head>
<body>
	<div id="a">
		<p>有空隙时：</p>
		<img src="pic/print-01.jpg" />
		<img src="pic/print-02.jpg" />
		<img src="pic/print-01.jpg" />
	</div>

	<div id="b">
		<p>无空隙时：</p>
		<img src="pic/print-01.jpg" />
		<img src="pic/print-02.jpg" />
		<img src="pic/print-01.jpg" />
	</div>

</body>
</html>

本文地址：https://blog.csdn.net/qq_47175528/article/details/107368944

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网