html图片上下间距怎么设置

在test.html文件内,使用margin属性设置两张图片之间的距离。

例如,设置1.jpg图片距离3.jpg图片30px,可以使用margin-right属性进行设置。

图片是指由图形、图像等构成的平面媒体。图片的格式很多，但总体上可以分为点阵图和矢量图两大类，我们常用BMP、JPG等格式都是点阵图形，而SWF、CDR、AI等格式的图形属于矢量图形。

有两种方法：

一、利用无序标签ul li来实现，基本语法及格式如下：

<ul class="pic">

<li><img src="图片路径" width=“宽” height=“高”/></li>

<li><img src="图片路径" width=“宽” height=“高”/></li>

<li><img src="图片路径" width=“宽” height=“高”/></li>

</ul>

CSS样式如下：

.pic{float:lefttext-decoration:nonepadding-left:10px}

二、利用div标签也可实现

<div>

<div><img src="" alt=""></div>

<div><img src="" alt=""></div>

<div><img src="" alt=""></div>

<div><img src="" alt=""></div>

</div>

CSS属性样式设置与上面ul li 类似。

为了更方便、更快捷的方法个人建议使用ul li 去做，因为ul li 容易控制，设置相应的样式也非常简单。

1、打开html开发工具，新建一个html页面。

2、在html页面创建一个div标签，然后在div标签里创建5个a标签。

3、为了看得更加明显，我们将对新建的div标签、a标签设置样式，然后使用浏览器打开html页面，发现a标签之间是存在间距的。

4、把a标签的代码显示为一行，然后再html页面刷新浏览器查看效果，发现a标签之间的间距不见了。

5、把a标签还是恢复为每个标签显示一行，然后设置a标签父类的样式为：font-size:0。

6、font-size:14px最后在浏览器上刷新页面发现a标签之间的间距没有了。

---