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. STL学习 - map

    C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值. 一.map的说明    1   头文件 #include <map> 2  ...

  2. Linux CentOS安装postgresql 9.4

    一.前言 PostgreSQL通常也简称Postgres,是一个关系型数据库管理系统,适用于各种Linux操作系统.Windows.Solaris.BSD和Mac OS X.PostgreSQL遵循P ...

  3. C#对DBF文件的操作

    protected void Page_Load(object sender, EventArgs e) { System.Data.Odbc.OdbcConnection conn = new Sy ...

  4. 轻松获取LAMP或LNMP环境编译参数

    查看web服务的编译参数 1. 查看nginx的编译参数: /apps/nginx/sbin/nginx -V 范例: [root@VM- ~]# /apps/nginx/sbin/nginx -V ...

  5. etcd命令说明 etcd Version: 3.0.15

    etcd Version: 3.0.15Git SHA: fc00305Go Version: go1.6.3Go OS/Arch: linux/amd64 https://github.com/co ...

  6. Web前端安全问题

    1.XXS跨站脚本攻击(Cross Site Scripting) 1)通过<script> 举个例子:通过QQ群,或者通过群发垃圾邮件,来让其他人点击这个地址: book.com/sea ...

  7. python学习（解析python官网会议安排）

    在学习python的过程中,做练习,解析https://www.python.org/events/python-events/ HTML文件,输出Python官网发布的会议时间.名称和地点. 对ht ...

  8. window7下karma 报 nodejs request TypeError: The header content contains invalid characters BUG

    这个BUG 估计只有中国人才 遇到 打开你的依赖node_modules\karma\node_modules\connect\lib\patch.js 将里面的setHeader方法改成下面这样,干 ...

  9. Sql Server中不常用的表运算符之APPLY(1)

    写在这个系列的前面: 就像他们的名字一样,作为一个表运算,他们用来运算左表和右表.JOIN也是一个表运算符,不过他太常用了. APPLY: 将右表表达式应用在左表的每一行上. APPLY是Sql200 ...

  10. navDemo

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...