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. bash 相关的一些小代码片断

    批量修改文件名: for i in *.html; do mv $i ${i/oldstring/newstring}; done; 批量替换文件内容: sed -i "s/oldstrin ...

  2. windows脚本配置ip地址

    背景:工作上经常涉及到要调试设备,每次都要手动配置静态ip地址,配置完之后还要重新改回来,有时候为了连续调试多台设备,来回手动更改ip,实在麻烦. 思考:想到windows有脚本,可以利用脚本文件达到 ...

  3. Matlab中的一些小技巧

    (转于它处,仅供参考) 1.. Ctrl+C 中断正在执行的操作 如果程序不小心进入死循环,或者计算时间太长,可以在命令窗口中使用Ctrl+c来中断.MATLAB这时可能正疲于应付,响应会有些滞后. ...

  4. 跨境B2B网站

    大家都在谈跨境电商,其实现在比较火的应该是跨境B2B网站,它被很多的业内人士所看好,并且也取得了很喜人的成绩,无论是经营方面还是品牌打造,都从多方向带动了行业的发展. 跨境B2B网站 一.从买方市场向 ...

  5. [QDB] 幽灵分享：QDataSet+TQMSSQLConverter 实战技巧

    转载自QDAC官网网站,文章发现问题可能随时更新,最新版本请访问:http://blog.qdac.cc/?p=3066 [注]本文由网友 幽灵 分享,由 swish 整理并重新编辑.1.将A数据库A ...

  6. TCP连接的三次握手和四次解散过程

    客户端和服务器在使用TCP连接传输数据的过程中,需要经过三次握手建立连接和四次握手断开连接操作. 具体如下图所示 上图描述了TCP连接从建立到断开的详细过程,以下就其中的具体报文细节展开讨论. 在TC ...

  7. SQL Server 2012 AlwaysOn 亲身实历记

    亲身经历的一个项目,老板忽然提出,对数据库的负债要实施分流,来个数据库一个负责读,而另一个负责写,后台是需要同步两个数据库的状态.找了很多的资料,发现新版的alwayson可以实现这个功能. 研读了a ...

  8. win10 自动亮度关闭无效问题

    升级win10后,发现系统的关闭自动亮度功能无效了,怎么调整都没有效果,百度把,服务也关了,电源管理也关了,自己的显卡节电设置也关了,最后摸索,只要把电池状态下,和通电状态下的屏幕亮度都调整到50%以 ...

  9. SQL Server 的数据表简单操作

    --创建数据表--[use 要创建数据表的数据库名称go]create table 要创建的表名(字段名 数据类型[长度] [null | not null] [primary key],... .. ...

  10. php使用curl简单抓取远程url的方法

    这篇文章主要介绍了php使用curl简单抓取远程url的方法,涉及php操作curl的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了php使用curl抓取远程url的方法.分 ...