css中去除inline-block元素间间距多种方法分享
<input /> <input type="submit" />
.space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; }
<div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div>
<div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div>
<div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div>
<div class="space"> <a href="##">惆怅</a><!-- --><a href="##">淡定</a><!-- --><a href="##">热血</a> </div>
.space a { display: inline-block; margin-right: -3px; }
margin
负值为-3
像素,Tahoma和Verdana就是-4
像素,而Geneva为-6
像素。<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div>
<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血 </div>
.space { font-size: 0; } .space a { font-size: 12px; }
类似下面的代码:
.space { font-size: 0; -webkit-text-size-adjust:none; }
-webkit-text-size-adjust:none;
代码估计时日不多了。.space { letter-spacing: -3px; } .space a { letter-spacing: 0; }
letter-spacing
再小就还原了。.space { word-spacing: -6px; } .space a { word-spacing: 0; }
letter-spacing
)一个是单词间距(word-spacing
),大同小异。据我测试,word-spacing
的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing
即使负值很大,也不会发生重叠。display: table;
或display:inline-table;
让Chrome浏览器也变得乖巧。.space { display: inline-table; word-spacing: -6px; }
letter-spacing
和word-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; }
li { display:inline-block; background: orange; padding:10px; word-spacing:0; } ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; } .nav li { *display:inline;}
您可能感兴趣的文章:
css中去除inline-block元素间间距多种方法分享
css中负Margin你不知道的秘密
block(块元素)、inline(内联元素)的差别是什么?
CSS3去除inline block 元素之间多出的空格
深入分析CSS布局中BFC及例子应用
js控件隐藏与display属性学习
css3中flexbox伸缩盒深入理解
html5 table标签的样式介绍(另附html5 table css居中的实例)
css中inline-block元素的空白间距
由浅入深漫谈margin属性