一、现象描述

　　真正意义上的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. Pattern recognition and machine learning 疑难处汇总

    不断更新ing......... p141 para 1. 当一个x对应的t值不止一个时,Gaussian nosie assumption就不合适了.因为Gaussian 是unimodal的,这意 ...

  2. 服务器配置tomcat部署项目

    部署项目首先你需要把你的java web项目打包成war文件 在需要打包的项目上右键>选择[Export] 选中[Web]下面的[WAR file],点击[Next] 通过[Browse]选择保 ...

  3. Oracle-13：Oracle中的表分区

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客记录了表分区 表分区的含义: 典型的拿空间换时间的案例! 表分区对一张表进行分区,分区之后表中的数据存 ...

  4. ActiveMQ的使用

    ActiveMQ使用分为两大块:生产者和消费者 一.准备 项目导入jar包:activemq-all-5.15.3.jar 并buildpath    二.生产者 创建连接工厂 ActiveMQCon ...

  5. Scrapy 1.4 文档 05 命令行工具

    在系统命令行中,使用 scrapy 命令可以创建工程或启动爬虫,它控制着 Scrapy 的行为,我们称之为 Scrapy 命令行工具(command-line tool)或 Scrapy 工具(Scr ...

  6. 开源RPC（gRPC/Thrift）框架性能评测

    海量互联网业务系统只能依赖分布式架构来解决,而分布式开发的基石则是RPC:本文主要针对两个开源的RPC框架(gRPC. Apache Thrift),以及配合GoLang.C++两个开发语言进行性能对 ...

  7. 怎么轻松学习JavaScript

    js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”.js给人那种感觉的原因多半是因为它 ...

  8. mysql用户链接数

    show status like 'Threads_connected';  当前连接数 show variables like '%max_connections%'; 最大链接数 set GLOB ...

  9. Javascript 中的map/reduce

    先填个坑,后面慢慢填 附上一篇不错的文章:https://segmentfault.com/a/1190000008719824

  10. 跟我学ASP.NET MVC之五：SportsStrore开始

    摘要: 这篇文章将介绍一个ASP.NET应用程序SportsStore的开发过程. 开始 创建解决方案 创建工程 在New ASP.NET Project - SportsStore窗口中,选择Emp ...