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

时间:2024-03-22 23:37:02

方法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;}