去除inline-block元素间间距
根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因。
第一种:
把代码之间的换行空白都去掉。
例如:
<div>第一个inline-block元素</div><div>第二个inline-block元素</div>
第二种:
把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。
例如:
<div style=”font-size:0" class="space">
<div>第一个inline-block元素</div>
<div>第二个inline-block元素</div>
</div>
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
去除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=" ...
- 【小知识点】去除inline-block元素间间距的办法
之前一直用float浮动方法布局,因为display:inline-block有间隙,现在找到办法了.在父元素上面加font-sise:0,就可以了. 效果如图: 代码如下: <!DOCTYPE ...
随机推荐
- [摘录]第三部分 IBM文化(2)
第二十二章 原则性领导 在一个组织程序已经变得不受其来源和内容的约束,而且其编纂出来的组织宗旨已经代替了个人责任的组织之中,你所面临的首要任务,就是要全盘抹掉这个程序本身,以便让整个封闭的系统呼吸新鲜 ...
- SIHA环境修改主机名实施步骤
目 录 1 实施需求 2 修改主机名 2.1 停止HAS服务 2.2 修改主机名 3 重新配置服务 3.1 使用root用户重新配置CSS & OHAS服务 3.2 设置cssd自动启动属性 ...
- Golang汇编命令解读
我们可以很容易将一个golang程序转变成汇编语言. 比如我写了一个main.go: package main func g(p int) int { return p+1; } func main( ...
- css水平居中的各种方法
说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢? 请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...
- Wireshark
0. install Wireshark on Ubuntu 14 sudo apt-get install -y wireshark sudo addgroup -quiet -system wir ...
- spring源码:ApplicationContext的增强功能(li)
ApplicationContext作为资源加载器:ApplicationContext作为事件发布者: Java原生提供了事件发布机制------EventObject对象作为发布的事件,Event ...
- GJM : Unity3D HIAR -【 快速入门 】 四、创建 Hello World
创建 Hello World 本文将介绍如何在 Windows 系统下,使用 HiAR SDK 创建一个简单的 AR 应用.在开始之前,请先完成下列准备工作: 注册 HiAR 帐户 获取 AppKey ...
- spring的依赖注入,为什么用接口的实现类而不是父类的继承类?
@Resource private EmployeeService employeeService; public void setEmployeeService(EmployeeService em ...
- Using AlloyTouch to control three.js 3D model
As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch ...
- Atitit.日志系统slf4j的使用
Atitit.日志系统slf4j的使用 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar ...