使用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 ...
随机推荐
- QQ好友在线/离线,怎么测试?
即时通讯是目前internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷,那么今天主要针对QQ好友在线状态/QQ群友在线状态功能出发,一起思考其中的实现原理以及我们如何去测试此功能? 当大 ...
- mac下安装 resin 奇葩问题总结
mac 下安装 resin(需要确认电脑配置好了 java 环境变量): 第一步:去 resin 的官网下载最新的压缩包,官网连接:http://caucho.com/products/resin/d ...
- ps-修复
1- 复制图层 2- 工具栏——套索——多变套索工具——上侧工具栏——羽化(15像素) 选区,防止其他区域被修改 羽化,让修改的边缘柔和化 3- 选项区——编辑——填充 ...
- 如何用photoshop把一张图片分割成几张图片呢?
今天情人节,祝大家节日快乐!朋友发来一张照片,我发现这张照片是几张照片组合起来的,是不是感觉每一张都是萌萌哒呢?为了体现单张的独特性,现在我要把它切分成单张,使用Photoshop CS5该怎么弄呢? ...
- pymysql使用心得记录
-----------更新日志 16.7.29------------- (该记录对应文章<豆瓣电影Top250基本信息抓取 >) 折腾了将近两天才把mysql数据库功能给实现了. 经过 ...
- Django后台设置--遇到的问题与解决方案
1. 后台如何管理项目中的models 新建的Django工程会自动引用admin 应用,新建后台可以通过 createsuperuser 命令建立后台admin超级管理员,我遇到的第一个问题,就是如 ...
- 20155323 2016-2017-2 《Java程序设计》第5周学习总结
20155323 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 提供两种异常处理机制:捕获异常和声明抛弃异常. 捕获异常:在Java程序运行过程中 ...
- python 爬取w3shcool的JQuery的课程并且保存到本地
最近在忙于找工作,闲暇之余,也找点爬虫项目练练手,写写代码,知道自己是个菜鸟,但是要多加练习,书山有路勤为径.各位爷有测试坑可以给我介绍个啊,自动化,功能,接口都可以做. 首先呢,我们明确需求,很多同 ...
- EDP转换IC NCS8801S:RGB/LVDS转EDP芯片
RGB/LVDS-to-eDP Converter1 Features Embedded-DisplayPort (eDP) Output 2-lane/4-lane eDP @ 1.62 ...
- Android 学习笔记之 个人认为最简单的查看Android源码方案
相信很多人都会疑惑如何使用Eclipse ADT查看源码? 下面我们将介绍 如何查看Android源码. 本文有如下优点: 1.不用费心去找Android源码地址:一个字烦,网上的东西杂七杂八的... ...