使用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 ...
随机推荐
- 纪念一下java学习之第一个get请求。
环境,变量及工具: 1.java jdk1.8.X 2.tomcat 8.5.11 3. 环境变量: CATALINA_HOME: tomcat安装地址 JAVA_HOME: JDK安装地址 ...
- iOS开发之UIPickerView
1.使用方法 UIPickerView使用和UITableView大致类似.首先设置ViewController为数据源,然后遵守数据源协议< UIPickerViewDataRecouce&g ...
- 配置linux实现路由功能
说明: 主机1是内网的数据存储服务器,只有一块网卡10.0.0.2: 主机2是web服务器,有两块网卡,一块面向内网10.0.0.3,一块面向外网192.168.220.136: (因为是在虚拟机的环 ...
- python3编码问题终结者--还搞不懂你来找我
python unicode bytes str 编码 首先需要说明一下,该篇文章是以python3为基础的,python2是否适合没有验证过.由于python编码问题确实比较多,文章篇幅可能较长,请 ...
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- require.js 源码解读——配置默认上下文
首先,我们先来简单说一下,require.js的原理: 1.载入模块 2.通过模块名解析出模块信息,以及计算出URL 3.通过创建SCRIPT的形式把模块加载到页面中. 4.判断被加载的脚本,如 ...
- iOS开发--Runtime的简单使用之关联对象
一.Runtime关联对象的方法简介: 在<objc/runtime.h>中,有三个关联的方法,分别是: objc_setAssociatedObject objc_getAssociat ...
- 将ROS中的/sensor_msgs/NavSatFix数据导入google earth显示轨迹
将ros中的gps_msg数据导入google earth显示轨迹 [TOC] 1. 获取GPS数据 将ros中发布的gps topic输出到文本中 rostopic echo -p /gpsData ...
- webpack点滴记录
有了webpack..(不借助gulp/grunt)代码压缩 图片base64,解析less/sass coffee css压缩,MD5加密都帮你做了..还支持按需加载..还有热替换 webpack常 ...
- 老李分享:Uber究竟是用什么开发语言?
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...