一、现象描述

　　真正意义上的inline-block水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。

二、移出空格的方法

　　① 我们可以去掉元素之间的换行和空格，这样间距自然就没有了，但是这样会降低代码的可读性，不可取。

    <div>

        <a href="">

        链接1</a><a href="">

        链接2</a><a href="">

        链接3</a><a href="">

        链接4</a>

    </div>

    <div>

        <a href="">链接1</a

        ><a href="">链接2</a

        ><a href="">链接3</a

        ><a href="">链接4</a>

    </div>

    <div>

        <a href="">链接1</a><!--

        --><a href="">链接2</a><!--

        --><a href="">链接3</a><!--

        --><a href="">链接4</a>

    </div>

　　② 使用margin负值，但是，由于外部的不确定因素，以及最后一个元素多出来的负margin值的问题，这个方法也不太可取。

<style>

        a {

            background: pink;

            display: inline-block;

            padding: .5em 1em;

            margin: -3px;

        }

</style>

<body>

    <div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

    </div>

</body>

　　③ 给父级设置font-size:0，然后再在子元素中设置我们的字体大小，这样也可以去掉元素间的间距。

<style>

        div{

            font-size: 0;

        }

        a{

            font-size: 16px;

            background: pink;

        }

</style>

<div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

</div>

　　④ 删掉闭合标签。

    <div>

        <a href="">链接1

        <a href="">链接2

        <a href="">链接3

        <a href="">链接4

    </div>

　　⑤ 使用letter-spacing。

<style>

        div{

            letter-spacing: -6px;

        }

        a{

            letter-spacing: 0;

            background: pink;

        }

</style>

<div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

</div>

　　⑥ 使用word-spacing。

<style>

        div{

            word-spacing: -6px;

        }

        a{

            word-spacing: 0;

            background: pink;

        }

</style>

<div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

</div>

去除inline-block元素间的间距的更多相关文章

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

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

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. html书写行内元素时-tab和换行会在行内元素间引入间距

    目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...

  4. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  5. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  6. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  7. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  8. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  9. 转载>>去除inline-block元素间间距的N种方法《重》

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

随机推荐

  1. flock SUSE/RHEL

    Util-linux-2.26 Util-linux 软件包其它实用程序.包括处理文件系统.控制台.分区以及消息等工具. 大概编译时间:1.3 SBU 需要磁盘空间:137 MB 6.65.1. FH ...

  2. IntelliJ IDEA中 todo的使用

    在代码的注释部分加入TODO 大小写忽略,如下图所示 查看项目中有哪些待办项,所下图所示

  3. CoreData的简单使用

    一.基础知识: CoreData是对SQLite的封装,使用的时候比较方便,减少对SQL语句的使用. CoreData中的核心对象 NSManagedObjectModel:代表Core Data 的 ...

  4. Linux时间子系统之八：动态时钟框架（CONFIG_NO_HZ、tickless）

    在前面章节的讨论中,我们一直基于一个假设:Linux中的时钟事件都是由一个周期时钟提供,不管系统中的clock_event_device是工作于周期触发模式,还是工作于单触发模式,也不管定时器系统是工 ...

  5. 使用Spring Boot Actuator、Jolokia和Grafana实现准实时监控

    由于最近在做监控方面的工作,因此也读了不少相关的经验分享.其中有这样一篇文章总结了一些基于Spring Boot的监控方案,因此翻译了一下,希望可以对大家有所帮助. 原文:Near real-time ...

  6. 玩转DWZ (一)---项目中怎么使用dwz

    最近一直在找一个完全开源的web客户端框架,看到了dwz,虽然不知道到底怎么样,但还是支持国产,先学习一下.这篇文章先说一下怎么在项目里使用dwz框架. 首先先下载dwz:https://code.c ...

  7. 玩转SSH--Hibernate(三)---手动修改数据库，前台查询信息不同步更新问题解决方法

    在用hibernate时遇到一个挺纠结的问题,就是我在手动修改数据库的信息后,前台页面查询到的信息还是之前的结果,一开始以为是缓存的问题,经过多次修改和在网上查询资料,最终发现可能是hibernate ...

  8. Spring_boot简单操作数据库

    Spring_boot搭配Spring Data JPA简单操作数据库 spring boot 配置文件可以使用yml文件,默认spring boot 会加载resources目录的下的applica ...

  9. Nginx 入门学习教程

    昨天听一个前同事说他们公司老大让他去研究下关于Nginx 方面的知识,我想了下Nginx 在如今的开发技术栈中应该会很大可能会用到,所以写篇博文记录总结下官网学习教程吧. 1. 什么是Nginx? 我 ...

  10. bash: pip: command not found... 解决方法

    下载安装wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz#md5=834b2904f92d46aaa3 ...