去除inline-block元素间间距的N种方法

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。

方法1:移除空格

<div class="space">

  <a href="##">

哈哈</a><a href="##">

呵呵</a><a href="##">

嘻嘻</a>

</div>

方法二:借助HTML注释

<div class="space">

<a href="##">呵呵</a><!--

--><a href="##">嘻嘻</a><!--

--><a href="##">哟哟</a>

</div>

方法三:使用margin负值

.space a { display: inline-block; margin-right: -3px; }

时间: 2024-10-19 21:02:47

去除inline-block元素间间距的N种方法的相关文章

[转]去除inline-block元素间间距的N种方法

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; paddi

转载&gt;&gt;去除inline-block元素间间距的N种方法《重》

一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~(正确理解:inline,inlin-block;block) 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1

去掉inline-block元素默认间距的几种方法

方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上font-size:0,内层再设置font-size覆盖.在谷歌浏览器上可能需要hack使其支持小字体. 方法4:使用负值的word-spacing或letter-spacing,用的不多 网上实例: 下面展示的是YUI 3 CSS Grids使用letter-spacing和word-spacing去

解决图片间间距的几种方法

当我们使用多个img标签时就会遇到img自带间距的问题如下 解决这个问题很多种方法,下面来简单说一下 1.如果只想解决解决竖向的间距 只需用vertical-align这个属性就可以了 img{ vertical-align: top; } 或者给img标签的父元素加上line-height属性 div{ line-height: 0; } 如果图片很宽一个就占一行的画,比如移动端的长图,给图片加display:block;就可以了: 2.如果只想解决左右的间距问当然可以把四周的间距都取消,然后

让一个元素垂直水平居中的三种方法

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

让一个元素垂直水平居中的三种方法【转】

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

去除inline-block元素间间距

一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb;

如何消除inline-block元素间间距问题(转)

一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; } <

去除inline-block元素间距的几种方法

平时制作页面的时候经常会用到inline-block属性的元素,而他们是有默认间距的. 今天制作移动端的时候又遇到这个问题,所以仅此记录一下 解决方法有: 第一种方法:加上 font-size:0; 和  font-size:12px; 不兼容safari浏览器,用行内元素李欢li,ie6下面中间有右间距1像素. ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding