解决img元素显示图片之间的空隙
程序员文章站
2022-06-22 15:50:26
一：问题问题图片：图中的三个图片之间有明显的空隙。即便是将外边距设为0，也没有效果。问题代码：
一：问题
问题图片：
图中的三个图片之间有明显的空隙。即便是将外边距设为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
推荐阅读
-
javascript动态改变img的src属性图片不显示的解决方法
-
li中插入img图片间有空隙的解决方案
-
解决img元素显示图片之间的空隙
-
javascript动态改变img的src属性图片不显示的解决方法
-
CSS学习笔记－图片img与父元素div之间的间隙解决_html/css_WEB-ITnose
-
CSS学习笔记－图片img与父元素div之间的间隙解决_html/css_WEB-ITnose
-
javascript动态改变img的src属性图片不显示的解决方法_图象特效
-
javascript动态改变img的src属性图片不显示的解决方法_图象特效
-
解决img元素显示图片之间的空隙
-
li中插入img图片间有空隙的解决方案