产生间隙的原因就是标签之间的空格,去除的方法:

1 设置父元素的font-size:0;空格字符的宽高都为0,

<div class="demo1 demo2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

2 inline-block元素在一行上,不换行

<div class="demo1">
<span></span><span></span><span></span><span></span>
</div>

3 inline-block元素换行,但是上一个标签的结束标签与下一个标签的开始标签在一行上

<div class="demo1">
<span></span><span>
</span><span>
</span><span>
</span>
</div>

或者

<div class="demo1">
<span></span
><span></span
><span></span
><span></span>
</div>

4 在上一个标签的结束标签和下一个标签的结束标签之间加上注释,消除空格的影响

<div class="demo1">
<span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>
</div>

5 设置margin负值:margin负值的大小与上下文的字体和文字大小相关

或者设置letter-spacing 或者word-spacing

去除inline-block的间隙的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

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

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

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

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

  4. 去除inline-block之间的间隙

    在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...

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

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

  6. inline, block, and inline-block

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

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

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

  8. inline,block,inline-block解析

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

  9. Display属性学习总结

    HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...

  10. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. HDU 3062 简单的2-SAT问题

    在2-SAT,最让我纠结的还是添加有向线段的函数了 void add_clause(int i,int a,int j,int b){    int m=2*i+a;    int n=2*j+b;  ...

  2. [luoguP2831] 愤怒的小鸟(状压DP)

    传送门 感觉这题不是很难,但是很恶心. 说一下几点. 1.预处理出来每两个点所构成的抛物线能消除的猪的集合. 2.如果两个点横坐标相同,则不能构成抛物线 3.a >= 0 continue 4. ...

  3. 后缀排序(codevs 1500)

    题目描述 Description 天凯是MIT的新生.Prof. HandsomeG给了他一个长度为n的由小写字母构成的字符串,要求他把该字符串的n个后缀(suffix)从小到大排序. 何谓后缀?假设 ...

  4. 虫食算(codevs 1064)

    题目描述 Description 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045    +    8468#6 ...

  5. 【HDOJ6319】Ascending Rating(单调队列)

    题意: 思路: 倒着来是因为这样可以维护每一个当过最大值的数,而正着不行 #include<cstdio> #include<cstring> #include<stri ...

  6. eclispe使用

    eclipse 快捷键 ctrl+shif+o     :去除多余引用 ctrl+shift+x    :转大写 ctrl+shift+y    :转小写 ctrl+o :查找方法 Alt+ ← :回 ...

  7. 修改flex chart中Legend的字体样式

    最近在弄FLEX的图表, 发现CHART 中的Legend 的字体通过直接设置Style 并没有办法改变字体大小. google 了下, 发现了这个方法: 通过派生LegendItem类,并设置Leg ...

  8. oc温习六:预处理指令

    预处理:分析程序前先处理的语句,它可以识别散布在程序中的特定语句.所有的预处理语句都适用“#”开头,这个符号必须是一行中的第一个非空字符. 预处理可以大概分为三类:文件包含.宏定义和条件编译. 1.文 ...

  9. oc温习三:常用函数

    参考文章: 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; //0-49之间的随 ...

  10. POJ 1094 Sorting It All Out【拓扑排序】

    题目链接: http://poj.org/problem?id=1094 题意: 给定前n个字母的大小关系,问你是否 根据前xxx个关系得到上升序列 所有关系都无法确定唯一的一个序列 第xxx个关系导 ...