关于img,表单标签间距问题:多个img之间有间距,input与其他元素之间有间距。

关于img,表单标签间距问题:多个img之间有间距,input与其他元素之间有间距。

比如这样;

或者这样:

要怎么解决呢?

方法很简单。

1.如果只需要解决左右间距问题,可以给他一个margin-left:负值,看一下我的效果


左右间隙完美的解决掉了。

当然,还有另外的方法:设置vertical-align属性为bottom或者top,可以达到相同的效果。


然后呢,给元素加上line-height:5px;可以消除上下的间距;

2.上面的方法只解决了左右或者上下间隙。所有间隙都要消除要怎么办呢?

首先可以给父元素加上属性font-size:0px;

像这样:

上下左右间距都没有了,但是呢,细心的童鞋们应该发现了,图片上面应该有一行文字的。

这就是这个方法的弊端,它会改变文字的大小,所以还得给文字另设大小。


所以呢我们有更好的方法;

给img加上display:block;并给img 浮动float:left;

这样一来就很完美了;

其实呢还有别的方法。比如把img都写在一行。或者把img之间的空格什么的都注释掉。但是比较low,就不推荐使用了。

你可能感兴趣的:(关于img,表单标签间距问题:多个img之间有间距,input与其他元素之间有间距。)