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

生命价值不在于获取多少,生命价值在于付出多少。有钱的人更有钱,这往往是一种必然。
写了个如下的代码,但是显示的结果是图片之间有缝隙,这个代码不是很完美,原本希望的结果是图片之间完全是零距离的:
复制代码
代码如下:

<div style=”width:620px; height:50px;”>
<ul>
<li><a rel="nofollow noopener noreferrer" href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″></a>
<a rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" href=”#”><img src=”uploadfile/liyongjin.gif” width=”130″ height=”50″ border=0></a>
<a rel="nofollow noopener noreferrer" 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>

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

到此这篇关于用css margin去掉横排图片之间的间距就介绍到这了。一个人的性格决定他的机遇。如果你喜欢保持你的性格,那么,你就无权拒绝你的机遇。更多相关用css margin去掉横排图片之间的间距内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题