html图片上下间距怎么设置

html-css016

html图片上下间距怎么设置,第1张

在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 容易控制，设置相应的样式也非常简单。

<div>

<div style="float:leftmargin-left:10px">放一张图片</div>

<div style="float:leftmargin-left:10px">放一张图片</div>

<div style="float:leftmargin-left:10px">放一张图片</div>

<div style="float:leftmargin-left:10px">放一张图片</div>

<div style="float:leftmargin-left:10px">放一张图片</div>

<div style="float:leftmargin-left:10px">放一张图片</div>

................(根据你的图片数目添加div）

</div>