论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS教程:如何消除inline-block元素间距

文章类别:div+css | 发表日期:2012-7-11 9:12:24

CSS教程:如何消除inline-block元素间距


一、方法:移除空格

   
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

<div class="space">
    <a href="##">
    间距</a><a href="##">
    怎么办</a><a href="##">
  21视频教程网帮您解决</a>
</div>

或者是:

<div class="space">
    <a href="##">间距</a
    ><a href="##">怎么办</a
    ><a href="##">21视频教程网帮您解决</a>
</div>
或者是借助HTML注释:
<div class="space"> <a href="##">间距</a><!-- --><a href="##">怎么办</a><!-- --><a href="##">21视频教程网帮您解决</a> </div>

二、使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}
    例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
三、让闭合标签吃胶囊
如下处理:
<div class="space">
    <a href="##">间距 
<a href="##">怎么办
<a href="##">21视频教程网帮您解决</a> </div>
注意:为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。
在HTML5中,我们直接:
<div class="space">
    <a href="##">间距
<a href="##">怎么办
<a href="##">21视频教程网帮您解决</div>
四、使用font-size:0
类似下面的代码:
.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}
    这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}
    补充:根据小杜在评论中中的说法,目前Chrome浏览器已经取消了最小字体限制。因此,上面的-webkit-text-size-adjust:none;代码估计时日不多了。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058