Question

在利用css和html网页制作中图片与图片为甚么出现很大的距离

如果把图片标题删除的话会好一些但还是会有空格，为什么？求解 纠结很久了谢谢大家帮助

Answer 1

首先你的四个图片肯定是你div写了不对，你将图片+文字写好作为一个li
<ul>
<li class="a1"><img src="../a.jpg" alt=""> <span>假设假设假设</span></li>
<li class="a2"><img src="../b.jpg" alt=""> <span>假设假设假设</span></li>
<li class="a3"><img src="../c.jpg" alt=""> <span>假设假设假设</span></li>
<li class="a4"><img src="../d.jpg" alt=""> <span>假设假设假设</span></li>
</ul>
按照我举例子这样子去写css，就不会发生问题了，先看看需要间距是多大，希望对你有帮助！

Answer 2

这个是浏览器的一个设计问题。

1.img本来是行内元素，却可以用width 和height,当父元素没有设置高度的时候，用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。

2.img图片默认排版为 inline-block;而所有的inline-block元素之间都会有空白。

解决办法：

法一：将img显示设置成  display：block;因图片横向排列，同时设置向左浮动

.box>img{
    width: 150px;
    display: block;
    float: left;
}

法二：将父容器字体大小设为零。font-size:0;

.box{
    font-size:0;
}

法三：去掉<img>标签之间的空格，将所用的<img>标签书写在同一行（即各个img标签之间不留空格）,无须设置其他样式。

<div class="box">
    <img src="images/home01.png"><img src="images/home02.png">
</div>

Answer 3

具体要看到代码才知道，这里只能简单说说：
图片之所以对不齐是因为文字的高度不固定造成的，给文字指定一个固定的高度（超过的文字不显示，字数不足就空着）就可解决。至于空格，估计是因为图片为行内元素造成的，总之没看见代码不敢妄下结论。

Answer 4

因为img是行内元素,

设置样式

img{
	display:block;
}

或者:

img{
    float: left;
}

然后把其他标签的padding和margin设置为0,就不会再有距离了