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. Cordova webapp实战开发（20161207 ）

    http://www.cnblogs.com/zhoujg/archive/2015/05/28/4534932.html 1.https://www.jetbrains.com/idea/downl ...

  2. PHP中类自动加载的方式

    最近在学习composer,发现从接触PHP到现在已经遇到了三种关于PHP中类的自动加载方式,这其中包括PHP自带的类的自动加载方式.PHP的第三方的依赖管理工具composer的加载方式以及PHP的 ...

  3. ZYNQ fsbl阶段的调试方法

    以下是从安富利工程师的技术支持的邮件中摘抄的,在此再次对他们表示感谢. 在我们面对客户单板的时候,fsbl阶段的调试多少会有些问题,在这个过程中怎么快速定位客户的问题,并将有效的信息反馈给希望能帮助到 ...

  4. Linux解压和打包jar

    linux 中解压jarunzip XXX.jar -d app 打jar 进入到解压目录里面(app)jar cvfm0 MR-XDR-JMR-NEW.jar META-INF/MANIFEST.M ...

  5. HTML5来回拖动实例

    <html> <meta charset="utf-8"> <script> //规定被拖动的数据 function tdwhat(ev,obj ...

  6. 总结一些关于操作数据库是sql语句还是存储过程问题

    总结一些关于操作数据库是sql语句还是存储过程问题 程序中,你跟数据的交互,需要向数据库拿数据.更改数据库的数据等,这些操作,本身不是程序完成的,而是程序发命令给数据库去做的,不管是通过sql语句方式 ...

  7. linux chmod 755

    chmod是Linux下设置文件权限的命令,后面的数字表示不同用户或用户组的权限. 一般是三个数字: 第一个数字表示文件所有者的权限 第二个数字表示与文件所有者同属一个用户组的其他用户的权限 第三个数 ...

  8. hibernate 注解 主键生成策略

    一.JPA通用策略生成器       通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id, 其生成规则由@GeneratedValue ...

  9. CVPR 2007 Learning to detect a salient object

    Dataset: MSRA A&B are introduced in this paper. A conditional Random Field based method was prop ...

  10. 怎么部署java项目（从搭建环境说起）

    1.服务器需要安装对应开发版本的jdk 在官网下载jdk对应的jdk版本,解压到某个目录下如: root@guchen-ubuntu16-04lts:/home/guchen/usr/java# ls ...