inline-block元素间距去除掉方法介绍(图文教程)

间距就来了~~

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

<div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div>

您可以狠狠地点击这里：inline-block元素间间距demo
这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。
不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！
二、方法之移除空格元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
<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>
或者是借助HTML注释：
<div class="space"> <a href="##">惆怅</a><!-- --><a href="##">淡定</a><!-- --><a href="##">热血</a> </div>
等。
三、使用margin负值 
.space a { display: inline-block; margin-right: -3px; }
margin负值的大小与上下文的字体和文字大小相关，其中，间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格：

例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。
由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
四、让闭合标签吃胶囊如下处理：
            








上一篇：19楼网页广告设计规范


下一篇：淘宝店铺设计的方法教程 宝贝描述的详细处理方法














发表评论
共有条评论






用户名:

密码:



验证码:

 

匿名发表