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

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. bzoj 1432 [ZJOI2009]Function 思想

    [bzoj1432][ZJOI2009]Function Description Input 一行两个整数n; k. Output 一行一个整数,表示n 个函数第k 层最少能由多少段组成. Sampl ...

  2. react.js 组件之间的数据传递props

    /* *属性 * 1.如何传递属性 * 2.属性和状态区别和联系 * * 3.子组件都有一个props属性对象 * * 4.单线数据流(只能从父组件流向子组件,就是在父组件定义一个属性,子组件可以通过 ...

  3. 显示倒计时的Button按钮

    package com.pingyijinren.helloworld.activity; import android.os.CountDownTimer; import android.suppo ...

  4. Python 列表的复制操作

    2013-10-18 10:07:03|   import copy a = [1,2,3,['a','b']] b = a c = a[:] d = copy.copy(a) e = copy.de ...

  5. 毕业bg--hdu1881(01背包)

    http://acm.hdu.edu.cn/showproblem.php?pid=1881 01 背包  先按发起人离开的时间从小到大排序 然后再套01背包的模板 #include <iost ...

  6. loj6172 Samjia和大树(树形DP+找规律)

    题目: https://loj.ac/problem/6172 分析: 首先容易得出这样的dp式子 然后发现后面那个Σ其实是两段区间,可以用总和减去中间一段区间表示,所以只要维护个前缀和就ok了 这样 ...

  7. C# 读自己的资源文件

    Assembly assm = this.GetType().Assembly;//Assembly.LoadFrom(程序集路径); foreach (string resName in assm. ...

  8. 一天教你入门struts2

    写在前面 自己也是一个java和java web的菜鸟.之前没有接触过java web方面的开发 想通过一个小项目,来熟悉struts2的开发流程 一个有趣的想法源于教研室项目上的一个功能实现–自己主 ...

  9. 区分Integer.getInteger和Integer.valueOf、Integer.parseInt() 的使用方法

    Integer类有两个看起来很类似的静态方法,一个是Integer.getInteger(String),另外一个是Integer.valueOf(String).如果只看方法名称的话,很容易将这两个 ...

  10. 用户代码未处理 UpdateException

    无法更新 EntitySet"Project_project",由于它有一个 DefiningQuery.而 <ModificationFunctionMapping> ...