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. 《Linux企业应用案例精解(第2版)》新书发售啦

    本书在出版当年就获得了不错的销量,同时被中国科学院国家科学图书馆.中国国家图书馆.首都图书馆.清华大学.北京大学等上百所国内综合性大学图书馆收录为馆藏图书,在IT业界赢得了良好的口碑.随后2012年年 ...

  2. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  3. C#中如何定义全局变量及在各窗体中使用全局变量

    using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; us ...

  4. jQuery EasyUI CheckBoxTree的级联选中

    :子结点选中,父节点随之选中,父节点取消,子节点随之取消 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

  5. swift 多线程及GCD

    1.基本概念 1)进程: 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程运行在其专用且受保护的内存空间里.某进程内的线程在其它进程不可见 2)线程: 1个进程要执行任务,必须有 ...

  6. Leetcode2:Add Two Numbers@Python

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  7. 常见寻找OEP脱壳的方法

    方法一: 1.用OD载入,不分析代码! 2.单步向下跟踪F8,是向下跳的让它实现 3.遇到程序往回跳的(包括循环),我们在下一句代码处按F4(或者右健单击代码,选择断点——运行到所选) 4.绿色线条表 ...

  8. js的数据类型

    关于js中的几大数据类型,估计大家都很熟悉:String.Number.Array.Bollean.Null.Undifine.Object: 从这其中,可以延伸出一个感念:基本数据类型和引用类型: ...

  9. IT在线学习网站总结

    以下是我自己做软件过程中发现的一些不错的IT学习网站,个人感觉比较受用,故总结出来以供IT爱好者一起学习: www.maiziedu.com  麦子学院 www.jikexueyuan.com 极客学 ...

  10. ASP.NET MVC WEBAPI第一次接触

    asp.net 的MVC4 WEBAPI的出现已经有段时间了.最近因为做自己的一些小玩儿,要做一个API,正好可以学习一下这个WEBAPI. WEBAPI项目的创建我就不啰嗦,先来看看webapi的路 ...