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. x-ua-compatible的实践

    前提: 在ie8中测试 页面头部含有<!DOCTYPE html> 结果: <meta http-equiv="x-ua-compatible" content= ...

  2. 解压版mysql安装

    步骤如下: 1.下载安装包 2.在环境变量中配置安装包的bin路径 3.修改安装包下的my-default.ini. 修改basedir和datadir的值为解压文件对应的路径,port和 serve ...

  3. Cordova webapp实战开发（20161207 ）

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

  4. log4j输出日志到不同文件

    1.先看log4j的配置文件 log4j.properties 没有此文件就在根目录下创建一个: log4j.rootLogger=INFO,R,Client log4j.appender.R=org ...

  5. PIC32MZ tutorial -- OC Interrupt

    In my previous blog "PIC32MZ tutorial -- Output Compare", I shows how to apply Output Comp ...

  6. javascript知识点总结----函数内部属性

    在函数内部,有两个特殊的对象:argumengs和this 1.函数的参数 ECMAScript函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,也就是说:你定义的函数只接收2个参数, ...

  7. FireDac 的RecordCount 相关测试 记录。

    unit Unit4; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  8. MATLAB 文件对话框之图片格式转换

    localpathname为当前路径,需要保存图片的位置,根据自己的实际路径设置,usedpathname用来保存打开的文件位置,方便下次打开文件对话框以上次的路径为默认路径. global used ...

  9. const char **

    foo (const char **p){    }   main (int argh,char **argv) {      foo(argv); } warning : argument is i ...

  10. ndoutils2.2.0(ndo2db)中文乱码问题解决

    ndoutils插入中文时,产生数据库乱码请用下面两个文件: 适用版本:ndoutils-2.0.0 数据库初始化mysql.sql: 修改ndoutils-2.0.0/src目录中的db.c ndo ...