清除inline-block元素之间的空白
一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质。被设为行内块的元素
对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和padding等;对兄弟元素
则表现为行内框,具体表现为相邻行内块可在同一行显示,而且有着行内元素的特点,就是框与框之间可以出现
空白,造成空白的方式可以使“空白符,制表符,换行符”。
可以通过简单的方式消除行内块之间的空白,就是在行内块的包含块上设置属性:
.wrapper{font-size: 0;*word-spacing: -1px;}
font-size设为0,可以让这些空白符的大小为0,从而不显示。但是在IE6,7下存在1px间隔现象,这样可以通过
设置word-spacing来修正。
但是对于Safari来说,不支持字体大小为0,所以需要额外的修正:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.wrapper {
letter-spacing: -4px; /* 修正Safari */
}
}
另外,IE6,7并没有inline-block属性,但是可以通过对行内元素触发hasLayout来模拟。
综上,修正行内块元素之间空白的方式的实现:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.wrapper {
letter-spacing: -4px; /* Safari 等不支持字体大小为 0 的浏览器,根据父级字体调节*/
}
}
.wrapper{font-size: 0;*word-spacing: -1px;}
.il{border:1px solid #000000;display:inline-block;
word-spacing: normal;letter-spacing:normal;*display:inline;*zoom:1;width:80px;height:100px;background: #cecece;font-size: 14px;vertical-align: top;}
.bl{border:1px solid #000000;width:80px;height:100px;word-spacing: normal;letter-spacing:normal;background:#d0e9c6;display: inline-block;*display:inline;*zoom:1;font-size: 14px;vertical-align: top;}
img{border:1px solid #000000;}
<div class="wrapper">
<span class="il">inline-block 1</span>
<span class="il">inline-block 2</span>
<span class="il">inline-block 3</span>
<div class="bl">block 1</div>
<div class="bl">block 2</div>
<div class="bl">block 3</div>
<img src="../../img/1.jpg" width="80" height="100">
<img src="../../img/2.jpg" width="80" height="100">
</div>
清除inline-block元素之间的空白的更多相关文章
- 清除行内元素之间HTML空白的几种解决方案
行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 清除行内元素之间的HTML空白
原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- 如何移除inline-block元素之间的空白
我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- inline-block 元素之间的空白问题
一.遇到的问题 前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去.上图: 可以看到,我本来是想要两行图片,每一行是三张.结果现在第一行的图 ...
- 两个inline-block中间有空白,解决inline-block 元素之间的空白问题
目录 一.遇到的问题 二.举个简单的栗子分析问题 三.解决办法 一.遇到的问题 前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去.上图: ...
随机推荐
- [LintCode] Sort List 链表排序
Sort a linked list in O(n log n) time using constant space complexity. Have you met this question in ...
- DSY2933*地图
Description 一个人口统计办公室要绘制一张地图.由于技术的原因只能使用少量的颜色.两个有相同或相近人口的区域在地图应用相同的颜色.例如一种颜色k,则A(k) 是相应的数,则有: 在用颜色 ...
- Spring MVC的配置文件(XML)的几个经典案列
1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...
- java面向对象_static关键字
1. 修饰成员变量:有static修饰的为静态变量,没有static修饰的称为实例变量. 实例变量:属于对象的,一个对象有一份.在创建对象的时候被初始化,存在多个副本,各个对象拥有的副本互不影响.存储 ...
- return array 评论添加状态和提示信息
ThinkSNS漏洞系列第一弹,某处处理不当导致SQL注入 漏洞点出现在Comment Widget里:\addons\widget\CommentWidget\CommentWidget.class ...
- Myeclipse中web project各种常见错误及解决方法(持续更新)
创建web project时的问题 error:Install Dynamic web Module Facet卡住 solution:把网络关掉再创建就可以 Servlet error:The se ...
- TreeView 使用方法:(在View.Details模式下)
1.建立TreeView的標題 2.建立TreeView的Item 3.在TreeView的Item中的建立SubItem 如果將各部 ...
- 第一章-第十四题(Hello world程序)
题目:请找一个同学结对 (参看本书结对编程的内容),两人共同工作 (不能分开干活),从上面的列表中选取两个平台,在每个平台上,写一个最简单的 "Hello World" 类型的程序 ...
- Android课程---关于数据存储的学习(3)之数据库和事务
DataActivity3.java package com.hanqi.test5; import android.content.ContentValues; import android.dat ...
- 抛开flash,自己开发实现C++ RTMP直播流播放器
抛开flash,自己开发实现C++ RTMP直播流播放器 众所周知,RTMP是以flash为客户端播放器的直播协议,主要应用在B/S形式的场景中.本人研究并用C++开发实现了RTMP直播流协议的播放器 ...