inline-block空隙怎么解决
方法一:移除空格
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
<div class="space"><a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>
或者是:
<div class="space"><a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>
或者是借助HTML注释:
<div class="space"><a href="##">惆怅</a><!----><a href="##">淡定</a><!----><a href="##">热血</a>
</div>
方法二:使用margin负值
.space a {display: inline-block;margin-right: -3px;
}
margin负值的大小与上下文的字体和文字大小相关,间距对应大小值可以参见“基于display:inline-block的列表布局
例如,对于12像素大小的上下文,Arial字体的margin
负值为-3
像素,Tahoma和Verdana就是-4
像素,而Geneva为-6
像素。
由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
方法三:让闭合标签吃胶囊
如下处理:
<div class="space"><a href="##">惆怅<a href="##">淡定<a href="##">热血</a>
</div>
注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。
在HTML5中,我们直接:
<div class="space"><a href="##">惆怅<a href="##">淡定<a href="##">热血
</div>
方法四:使用font-size:0
如下处理:
.space {font-size: 0;
}
.space a {font-size: 12px;
}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space {font-size: 0;-webkit-text-size-adjust:none;
}
方法五:使用letter-spacing
如下处理:
.space {letter-spacing: -3px;
}
.space a {letter-spacing: 0;
}
方法六:使用word-spacing
如下处理:
.space {word-spacing: -6px;
}
.space a {word-spacing: 0;
}
一个是字符间距(letter-spacing
)一个是单词间距(word-spacing
),大同小异。据我测试,word-spacing
的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing
即使负值很大,也不会发生重叠。
转载于:https://www.cnblogs.com/leena/p/6930175.html
inline-block空隙怎么解决相关推荐
- 在一个有返回值的方法中,用block回传的解决方法
在一个有返回值的方法中,用block回传的解决方法 参考文章: (1)在一个有返回值的方法中,用block回传的解决方法 (2)https://www.cnblogs.com/dsp-ios/p/64 ...
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- react 中 Warning A future version of React will block javascript 异常解决
react 中 Warning A future version of React will block javascript 异常解决 问题描述 <a href="javascrip ...
- span之间的空隙怎样解决?
span之间的空隙怎样解决? 一.问题描述 二.分析原因 三.解决办法 1.使用float:left 2.使用margin-right 3.使用letter-spacing 属性和word-spaci ...
- inline, block, inline-block区别
inline, block, inline-block区别 inline Not height and width; Not margin-top & margin-bottom; Alway ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- 淘宝里table中tr之间有空隙的解决方法
最近在公司遇到了淘宝里table <tr>之间有空隙的问题,直接正题不罗嗦: 方法一:在table中所有图片都加入"align="top"" 举例: ...
- html5 td中的5它空隙--待解决
这是html5的bug吗? td中的图片下有5px空隙,文字没有. <!DOCTYPE HTML> <html lang="en-US"> <head ...
最新文章
- DevExpress的TreeList怎样设置数据源,从实例入手
- 攻防世界-web-i-got-id-200-从0到1的解题历程writeup
- 坑 之 tensorflow使用sess.run处理图片时越来越慢,占用内存越来越大的问题
- OC仿支付宝输入UITextField输入车牌号
- [css] inline、block、inline-block这三个属性值有什么区别?
- js正则限制字符串长度_正则笔记(3)万字长文,慎点。
- Android Studio连接手机没反应,提示错误adb.exe start-server' failed -- run manually if necessary
- linux网络随机ip发包工具,三款常用IP发包工具介绍
- 用java实现学生成绩管理系统_学生成绩管理系统(java实现)
- python爬取网易云课堂python课程
- 武汉有哪些牛逼的互联网公司?
- Android模拟器实现windows虚拟串口通信调试
- 首都经贸计算机考研怎么样,【考研心路历程】首都经贸大学考研的回忆与感悟...
- 【网络安全】利用MSF工具内网复现MS08-067
- 多元线性回归算法: 线性回归Linear Regression、岭回归Ridge regression、Lasso回归、主成分回归PCR、偏最小二乘PLS
- H263,H264简介
- 高内聚 松耦合 高扇入 低扇出
- 蓝桥杯 BASIC-3 字母图形**
- Simulink 水轮机初始化设置
- Word输入空心字母|ℂ ℕ ℝ ℚ ℤ黑板粗体LaTex
热门文章
- 淘淘经受了一次考验...
- 句法依存分析_[NLP学习笔记]句法分析
- 基于CNN目标检测方法(RCNN,Fast-RCNN,Faster-RCNN,Mask-RCNN,YOLO,SSD)行人检测,目标追踪,卷积神经网络
- 关于位姿变换的一点体会
- java 头尾 队列_记一次腾讯面试,我挂在了最熟悉不过的队列上
- 可微偏导数一定存在_数学分析复习——偏导数(1)
- python调用什么函数实现对文件内容的读取_如何使用python语言中的方法对文件进行读写操作...
- Linux进程间通信(IPC)-------消息队列
- 华为机考HJ4字符串分隔C语言题解
- PHP退出浏览器程序执行定时任务,PHP执行定时任务