使用font-size:0去掉inline-block元素之间的空隙
现代浏览器的最新版都支持inline-block,只有该死的ie6、7不支持inline-block,但ie6、7可以通过
display:inline;
zoom:1;
来模拟
下面是inline-block兼容的代码:
view sourceprint?display:inline-block; *display:inline; *zoom:1; width:100px; vertical-align:top;
但是大家有没有发现,在firefox,safari,opera,ie8+中的 inline-block
元素之间会莫名其妙多出3px的间距,其实这个是换行符,如果将 inline-block 元素间的换行符去掉,这3px的间距就会消失了。
有没有在不影响代码美观的情况下去掉间距尼,答案是有的。
可以在inline-block的父元素中加上 :
font-size:0;
然后在 inline-block 中将字体设回来。
使用font-size:0去掉inline-block元素之间的空隙的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...
- 如何处理html中的内联元素之间水平空隙
写HTML时把需要紧挨着的内联元素写在一行,设置其父容器的font-size为0,再设置内联元素的字体大小,例如: <!DOCTYPE html> <html lang=" ...
- 关于行内元素之间有空隙的问题,例如span与input之间
问题如图: 想要的是下面的效果,而却出现上面的效果,解决方法如下: 对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现 中间会留一段小空隙 , 其实这个 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- 如何消除inline-block元素之间的间隙?
一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
随机推荐
- setDefaultCloseOperation()参数得使用说明
System.exit(0)是退出整个程序,如果有多个窗口,全部都销毁退出.setDefaultCloseOperation()是设置用户在此窗体上发起 "close" 时默认执行 ...
- 自适应滤波:维纳滤波器——GSC算法及语音增强
作者:桂. 时间:2017-03-26 06:06:44 链接:http://www.cnblogs.com/xingshansi/p/6621185.html 声明:欢迎被转载,不过记得注明出处哦 ...
- Java位向量的实现原理与巧妙应用
Java位向量的巧实现原理与巧妙应用 1.博文介绍 本篇博文将会介绍几本的位运算含义.位向量介绍.BitSet实现原理.Java位向量的应用.拓展介绍Bloom Filter等. 2.位运算介绍 1) ...
- java初学第二章
这两天学习了基本的数据类型还有运算符. 分享一下学习过程还有写作~ 数据类型分为基本数据类型还有引用数据类型,基本数据类型有4类8种: 整型: byte,short,int,long 浮点型:floa ...
- WebApi client 的面向切面编程
.Net的面向切面编程 .Net的服务端应用AOP很常见,在Asp.net MVC与Asp.net WebApi等新框架里到处都有AOP的影子,我们可以把一个服务方法“切”为很多面,日志面.验证面.请 ...
- web console实现
一.效果图 二.实现 web console是基于websocket实现的. 以上做的效果嵌入项目中,因为项目本身是angular1的项目,所以console整体封装成一个angualr modul ...
- SERVLET中的doGet与doPost两个方法之间的区别
get和post是http协议的两种方法,另外还有head, delete等 这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能是字符串.post的参数是通过另外的 ...
- C语言::模拟实现strlen函数
题目要求 编写一个C语言程序模拟实现strlen函数. 算法 strlen函数功能是计算字符串中字符的个数.(除\0外) 而字符串本身就是一个字符数组,只不过末尾以\0结束. 因此,我们只需遍历除\0 ...
- 函数调用过程&生成器解释
摘自马哥解答,感谢. 函数调用过程: 假设程序是单进程,单执行流,在某一时刻,能运行的程序流只能有一个.但函数调用会打开新的执行上下文,因此,为了确保main函数可以恢复现场,在main函数调用其它函 ...
- socket模拟通信实现ARQ停止等待协议
//服务端 import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im ...