html图片上下间距怎么设置

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

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

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

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

html调整添加的图片与文本之间的距离方法:

工具/原料

Dreamweaver

方法/步骤

1、打开Dreamweaver,之后,新建一个html文档,然后在界面的上方找到插入图片的按钮,点击它,插入图片。

2、插入图片之后,再写上文字,文字在图片下方,和图片的距离比较远,这是默认的距离,不会调的话,怎么调都是这么宽的。

3、切换到代码模式,或者拆分模式,拆分模式的好处就是可以同时看到代码和实际效果。

4、将图片和文字对应的所有P版权都删除,包括<p>和</p>,这些标签是段落标签,dw默认段间距太宽,所以我们就换一种段落方式。

5、删掉了p标签之后,在文字的前端写上<br>,然后看一下效果,图片和文字的距离缩小了,效果如图所示。

6、对于图片文字环绕效果,是在文字比较多的时候才会用到,由于新版dw的属性面板没有图片环绕方式的选项,只能从其它途径来修改了。

7、首先右击图片,然后选择对齐,这里有很多种对齐方式,常用的有左对齐和右对齐,左对齐就是图片在左边,文字在右边,右对齐就是文字在左边,图片在右边。这两种都是图片和文字的环绕效果。

8、就选择的是左对齐,效果如图中所示。是不是环绕的很整齐,在网页排版文字时经常需要用到。

在style 里面设置你需要的边距:

margin-bottom:5px//下边距5px

margin-left:5px//左边距5px

margin-right:5px//右边距5px

margin-top:5px//上边距5px


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7263926.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存