方法一:移除空格

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉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的列表布局

例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。

由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

方法三:让闭合标签吃胶囊

如下处理:

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

注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

在HTML5中,我们直接:

<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血
</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;
}

方法五:使用letter-spacing

如下处理:

.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}

方法六:使用word-spacing

如下处理:

.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。

inline-block空隙怎么解决的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. python中IndentationError: expected an indented block错误的解决方法

    IndentationError: expected an indented block 翻译为IndentationError:预期的缩进块 解决方法:有冒号的下一行要缩进,该缩进就缩进

  3. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  4. block循环饮用解决

    在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> val ...

  5. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  6. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  7. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  9. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

随机推荐

  1. Windows Server服务器之Linux server与windows server的区别

    Linux server与windows server的区别用linux做server,相对于windows server有什么优势? 首先,平均故障时间少,只要配置和使用得当,linux的平均故障( ...

  2. vue绑定属性、绑定class及绑定style

    1.绑定属性  v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...

  3. bzoj 1233: [Usaco2009Open]干草堆tower 【想法题】

    首先这题的$n^3$的DP是比较好想的 $f[i][j]$表示用前$i$包干草 且最顶层为第$j+1$包到第$i$包 所能达到的最大高度 然而数据范围还是太大了 因此我们需要去想一想有没有什么单调性 ...

  4. R 数据分析

    目录: windows命令行中执行R dataframe 常用函数.变量 1.windows命令行中执行R 前提:已经把R的命令目录加入了系统路径中. 在windows中,命令行执行R可以用以下两种方 ...

  5. opensuse 安装APACHE2+MYSQL+PHP5

    sudo zypper in apache2-mod_php5 apache2 mariadb 装好后, 记得启动APACHE2对PHP的支持: a2enmod php5 默认mysql密码为空, 可 ...

  6. The SDK directory '/home/wangju/gitProject/Automation/D:\Android_SDK' does not exist.

    执行gradle clean命令报错 gradle clean FAILURE: Build failed with an exception. * What went wrong: A proble ...

  7. 测开之路四十五:Django之最小程序

    安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...

  8. 后台获取html控件的值

    string name = Request.Form["Name1"].ToString(); “xxx” 里的是name值 Request["xx"]取到相同 ...

  9. Cocos2d-x之Vector<T>

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Vector<T>是Cocos2d-x 3.x中推出的列表容器,在cocos2d-x3.0之前的版本是Array,因此它所能容 ...

  10. Python中单下划线和双下划线

    1.双下划线开头和结尾 Python中存在一些特殊的方法,有些方法以双下划线 “__” 开头和结尾,它们是Python的魔法函数,比如__init__()和__str__等等.不用要这种方式命名自己的 ...