1.使用注释符号

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

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

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

     --><div><span class="4">4</span></div>

楼主对代码格式比较计较，这是动标签这边相对来说楼主可以接受的方式。

2.使用font-size和letter-space

html部分

<body>

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

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

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

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

</body>
css 部分

    <style>

        body {width: 100%;margin:;text-align: center;font-size:;letter-spacing: -2px;}

        div{display: inline-block;width: 50%;background: lightblue;font-size: 36px;position: relative;vertical-align: middle;}

        div:before {content:"";display: inline-block;padding-bottom: 100%;vertical-align: middle;}

        div:nth-child(2),div:nth-child(3){background: pink;}

        span {display: inline-block;vertical-align: middle;font-size: 6em;color: #fff;}

    </style>

主要就是在外层body添加

font-size:0,--兼容chrome

letter-spacing:-2px,--兼容safari ,据说要根据字体大小调整，但是楼主用了88px的字体也没有问题，这个具体情况具体解决吧

去除inline-block元素间间距，比较靠谱的两种办法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 如何消除inline-block元素间间距问题（转）

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

  9. map集合修改其中元素 去除Map集合中所有具有相同值的元素 Properties长久保存的流操作 两种用map记录单词或字母个数的方法

    package com.swift.lianxi; import java.util.HashMap; import java.util.Iterator; import java.util.Map; ...

随机推荐

  1. Mysql 数据库创建基本步骤

    1.创建数据库 create database school; 2.使用数据库 Use school; 3.创建用户 create user jame@localhost identified by ...

  2. C# 软件绑定QQ群类开源放出

    周天闲来无事写个公共类,可以添加到你们自己项目中限制必须加入你QQ群才可以使用. 代码简单,高手勿喷,有哪里不合理的请回帖让大家学习学习. using System; using System.Tex ...

  3. MS - 2 - 设计包含 min 函数的栈

    定义栈的数据结构,要求添加一个 min 函数,能够得到栈的最小元素. 要求函数 min.push 以及 pop 的时间复杂度都是 O(1). template<typename T> st ...

  4. ZXingObjC 64位 集成到自己的项目中(xcode 6.4)

    参考  http://www.cocoachina.com/bbs/read.php?tid-280058-page-1.html 楼主发的DEMO中 ZXingObjC 支持64位  但是是以项目形 ...

  5. Kafka server.properties配置说明（转）

    原文:https://my.oschina.net/infiniteSpace/blog/312890?p=1 http://www.inter12.org/archives/842 broker.i ...

  6. Mysql Explain 详解（转）

    原文:http://www.cnitblog.com/aliyiyi08/archive/2008/09/09/48878.html 一.语法 explain < table_name > ...

  7. uml的四种关系

    UML的四种常用关系: 泛化关系.关联关系.实现关系.依赖关系 其中泛化关系是指父类与子类之间的继承关系: 实现关系是指接口与实现类之间的关系: 依赖关系和关联关系的区别如下: 只要存在对象间的交互, ...

  8. asp.net mvc return file result

    asp.net mvc返回文件: public ActionResult ExportReflection(string accessToken) { var reflections = GetCms ...

  9. RHEL7/CentOS7中更改网卡默认名称

    1.重命名并修改网卡配置文件,将"NAME"参数更为我们熟悉的“eth*”,这里我将其改为"eth0" [root@localhost ~]# cd /etc/ ...

  10. android超快模拟器Ggenymotion的安装和配置

    原文地址:http://xiaochu.blog.51cto.com/1048262/1639613 Genymotion是一款运行速度快,且易于使用的android模拟器,非常适合与android程 ...