去掉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-spacingword-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法:

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}
时间: 2024-07-29 08:16:01

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

[转]去除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元素间间距的N种方法

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距. 方法1:移除空格 <div class="space"> <a href="##"> 哈哈</a><a href="##"> 呵呵</a><a href="##"> 嘻嘻</a> </div> 方法二:借助HTML注释 <div cla

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

第一种方法: 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属性的元素,而他们是有默认间距的. 今天制作移动端的时候又遇到这个问题,所以仅此记录一下 解决方法有: 第一种方法:加上 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

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

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

js实现元素宽度反弹的两种方法

方法一:此方法,不是我想的,但是超级喜欢,太漂亮了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02</title> <style> #outer{ width:1400px; height:400px; background-color: pink; } #inner{ width:20

【找数组元素最大值的十四种方法】for【练习知识点和总结】

以下是心血成果,版权所有,未经允许,不得转载.作者:李金涛:FROM:光环国际 AT:201712172024.(方便以后,再次修改) <script> // 比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,下面来介绍如下十四种方法,原理代码如下: // 1,排序取值:sort比较器排序(常用),以及冒泡排序(不常用,但方法思想很重要);// 2,假设比较取大值:假设max=arr[0];index=0; 在循环往后比较,如果有比max大的数就让max记录下大的数,索引赋给inde