使用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 ...
随机推荐
- (16)IO流之输入字节流FileInputStream和输出字节流FielOutputStream
IO流技术解决的问题:设备与设备之间的传输问题,内存-->硬盘,硬盘-->内存,等等 IO流技术 如果按照数据的流向划分可以划分为:输入流和输出流 输入输出的标准是以程序为参考物的,如果流 ...
- delphi处理消息的几种方式
第一种:自定义处理单条消息 unit Unit2; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, C ...
- Babel指南——基本环境搭建
ECMAScript的现状 ECMAScript,本身是一个脚本语言的设计规范,基于此规范,有许多为人熟知的语言,如JavaScript.ActionScript等.而时至几年前,随着Node.js的 ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
A floated box is shifted to the left or right until its outer edge touches the containing block edge ...
- rgba()和opacity的使用
rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,“可以让制定的颜色透明化”(rgb()上扩展的,其只可以设置颜色,而不能使设置的颜色透明化) ...
- bash变量
bash中的变量的种类 根据变量的生效范围等标准 本地变量:生效范围为当前shell进程:对当前shell之外的其它shell进程,包括当前shell的子shell进程均无效: 环境变量:生效范围为当 ...
- java的特点跨平台原理以及JDK的安装
终于开始了期待已久的java,了解java首先要了解下计算机语言的发展历史 机器语言--->汇编语言--->--->高级语言(面向过程的语言和面向对象的语言) 机器语言 每一个计算机 ...
- 微服务--webapi实现,脱离iis,脱离tomcat
前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...
- Linux下搭建mpi集群(ubuntu下用虚拟机测试)
一 建立SSH连接(无密码登陆) 1 SSH连接的简单介绍 SSH 为 Secure Shell 的缩写,中文翻译为安全外壳协议,建立在应用层,是一种远程连接安全协议.传统的telnet,pop,ft ...
- Luogu1074靶形数独【启发式搜索】
Luogu1074靶形数独 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教, ...