源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 用css margin去掉横排图片之间的间距

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2012-12-11 09:57:08 | 显示全部楼层 |阅读模式
HTM,CSS,怎样去掉横排图片之间的间距,是我们的一大头疼问题,于是本人搜集整理一下,晒出来和大家分享,希望可以帮助你们 写了个如下的代码,但是显示的结果是图片之间有缝隙,这个代码不是很完美,原本希望的结果是图片之间完全是零距离的:

复制代码代码如下:
<div style=”width:620px; height:50px;”>
<ul>
<li><a href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″></a>
<a href=”#”><img src=”uploadfile/wangsuhong.gif” width=”100″ height=”50″></a>
<img src=”uploadfile/xiangchun.gif” width=”240″ height=”50″>
<img src=”uploadfile/guilei.gif” width=”150″ height=”50″></li>
</ul>
</div>

该如何去掉图片间的缝隙呢?
查阅了相关的资料,在考虑将边框设置为0,不知道可不可行,试试看,下面是重新修改过的代码:

复制代码代码如下:
<div style=”width:620px; height:50px;”>
<ul>
<li><a href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″ border=0></a>
<a href=”#”><img src=”uploadfile/wangsuhong.gif” width=”100″ height=”50″ border=0></a>
<img src=”uploadfile/xiangchun.gif” width=”240″ height=”50″>
<img src=”uploadfile/guilei.gif” width=”150″ height=”50″></li>
</ul>
</div>

但是结果还是不尽人意,跟最开始的代码是一样的,那到底用哪个属性可以将图片间的间距给消除呢?间距?那就试试margin看看。
这个需要用到重置标签的样式, *{margin:0;padding:0;} 这只所有的标签的内外间距都为0,就可以了,而且实际我们在做重构页面的时候在公用样式上都必须重置用到的所有标签的这个属性。
在<head>里增加一个CSS样式声明,将重置标签放到里面,即加上:

复制代码代码如下:
<head>
<style type=”text/css”>
*{margin:0,padding:0;}
</style>
</head>

这样这个目标就完美的实现了。
回复

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2022-9-9 06:13:16 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2023-3-10 21:48:18 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2023-4-21 20:03:53 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2023-7-26 05:28:50 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-1 15:13:38 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-2 23:58:29 | 显示全部楼层
笑纳了老板
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-9-9 10:17:22 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-15 03:49:12 | 显示全部楼层
管灌灌灌灌灌灌灌灌灌灌
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2023-10-19 03:22:11 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 00:18 , Processed in 0.072713 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表