去除inline-block元素间间距,比较靠谱的两种办法
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元素间间距,比较靠谱的两种办法的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除inline-block元素间间距的N种方法
这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
- [转]去除inline-block元素间间距的N种方法
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 去除inline-block元素间间距的N种方法(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 去除inline-block元素间间距的N种方法-zhangxinxu
张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...
- 转载>>去除inline-block元素间间距的N种方法《重》
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 如何消除inline-block元素间间距问题(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...
- map集合修改其中元素 去除Map集合中所有具有相同值的元素 Properties长久保存的流操作 两种用map记录单词或字母个数的方法
package com.swift.lianxi; import java.util.HashMap; import java.util.Iterator; import java.util.Map; ...
随机推荐
- oracle-关于dual
来源:百度知道1. dual 是一张表.是一张只有一个字段,一行记录的表. 2.习惯上,我们称之为'伪表'.因为他不存储主题数据.3. 他的存在,是为了操作上的方便.因为select 都是要有特定对象 ...
- JSON.parse
摘自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse The J ...
- 【JAVA】【Eclipse】出现This element neither has attached source nor attached Javadoc...的解决方法
This element neither has attached source nor attached Javadoc and hence no Javadoc could be found Ec ...
- zend framework2 下载及安装
1.安装XAMPP 2.安装zend studio 3.在GITHUB上下载一个zendframework模板,插入到IDE中 4.将下载的zend framework2文件夹解压放在vendor文件 ...
- Eclipse中web项目部署至Tomcat【转】
Eclipse的web工程至Tomcat默认的部署目录是在工程空间下,本文旨在将部署目录改为Tomcat安装目录,并解决依赖包输出问题. 1.在Eclipse中添加Tomcat服务器. 2.将web ...
- 利用cubieboard设置samba打印服务器
#注意安装下面软件前,先将cubieboard的动态地址改为静态地址! apt-get install samba #安装samba vi /etc/samba/smb.conf //配置 workg ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- mysql实用操作
1.查看某个表的建表语句 show create table thetable -- thetable为待查表名
- js对象(一)
1.创建对象 /*直接创建*/ var person = new Object(); person.name = "宝宝"; person.age = 3; var person2 ...
- Git下载Spring项目源码并编译为Eclipse
1)当前系统中安装了gradle,如果为安装,可以从:http://www.gradle.org/downloads,,下载完后进行解压到任意盘符,然后增加环境变量GRADLE_HOME,并在环境变量 ...