文章目录
代码运行的浏览器:IE浏览器(IE 11.0)、谷歌浏览器(Google Chrome 版本 61.0.3163.100)、火狐浏览器(Firefox 56.0.1 )、欧朋(Opera 48.0.2685.50)
inline-block 特性及常见问题
inline-block特性:
- 块在一行显示;
- 行内属性标签支持宽高;
- 没有宽度的时候内容撑开宽度
- 代码空格/换行被解析;
inline-block如何去除缝隙?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block元素之间的空隙的消除方法</title>
<style>
.demo{
padding: .5em 1em;
background-color:#53c9df;
margin:10px;
}
img{
width:100px;
height:100px;
}
a{
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
</style>
</head>
<body>
<h2>问题,两者之间出现间隙:</h2>
<div class="demo">
<img src="20190218015729.png"/>
<img src="20190218015821.png"/>
<a href="##">好奇</a>
<a href="##">问题</a>
<a href="##">结果</a>
</div>
</body>
</html>
运作结果:
解决方法:
1、删去元素之间的空白
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。
<!--写法1:-->
<div class="demo">
<img src="20190218015729.png"/><img src="20190218015821.png"/><span>好奇</span><sapn>问题</sapn><apan>结果</apan>
</div>
注意: 考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
<!--写法2:-->
<div class="demo">
<img src="20190218015729.png"/><img src="20190218015821.png"/><a href="###">
好奇</a><a href="###">
问题</a><a href="###">
结果</a>
</div>
<!--写法3:-->
<div class="demo">
<img src="20190218015729.png"/
><img src="20190218015821.png"/
><span>好奇</span
><span>问题</span
><pan>结果</pan>
</div>
<!--写法4:-->
<div class="demo">
<img src="20190218015729.png"/><!--
--><img src="20190218015821.png"/><!--
--><span>好奇</span><!--
--><sapn>问题</sapn><!--
--><apan>结果</apan>
</div>
运行结果:
-
写法1:
-
写法2:
-
写法3:
-
写法4:
2、让闭合标签
示例1,如下处理:
//CSS 代码:
<style>
.space a{
display: inline-block;
padding:.5em 1em;
background-color: #cad5eb;
}
</style>
//html 代码:
<div class="space">
<a href="##">好奇
<a href="##">问题
<a href="##">结果</a>
</div>
注意: 为了向下兼容IE6/IE7等浏览器,最后一个列表的标签的结束(闭合)标签不能丢。
示例2,在HTML5中,我们直接:
//CSS 代码:
<style>
.space a{
display: inline-block;
padding:.5em 1em;
background-color: #cad5eb;
}
</style>
//html 代码:
<div class="space">
<a href="##">好奇
<a href="##">问题
<a href="##">结果
</div>
示例1和示例2,在浏览器们运行结果一致:
3、使用font-size:0
在父元素中设置font-size:0,然后在子元素上重置正确的font-size。
缺点: inline-block元素必须设定字体,不然行内元素中的字体不不显示。
类似下面的代码:
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
4、使用margin-right负值
缺点: 元素之间间距的大小与上下文字体大小相关;并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的,因此这个方法不通用。
注意: 当marigin-right使用相对单位em来表示时,Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
5、为inline-block元素添加样式float:left
6、使用display:table和word-spacing(最优的方法)
.box{
display:table; /* 调教webkit*/
word-spacing:-1em;/*其他浏览器*/
}
7、使用letter-spacing
**优点:**因为使用了letter-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。
.box{
letter-spacing: -0.5em;
}
.box div{
letter-spacing: 0;
}
8、使用word-spacing
**优点:**因为使用了word-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。
.box{
word-spacing: -0.5em;
}
一个是字符间距(letter-spacing),一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。
(一定要亲自实际操作)除了IE外,其他如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。
.space {
display: inline-table;
word-spacing: -6px;
}
9、其他成品方法
下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):
.yui3-g {
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* IE < 8 重置 */
word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
以下是一个名叫RayM的人提供的方法:
li {
display:inline-block;
background: orange;
padding:10px;
word-spacing:0;
}
ul {
width:100%;
display:table; /* 调教webkit*/
word-spacing:-1em;
}
.nav li { *display:inline;}
也就是上面一系列CSS方法的组组合合。
高度不同,如何顶端对齐?
解答:添加:vertical-align:top; (关于vertical-align属性,上网查询)
CSS代码:
div{
height: 100px;
width: 200px;
background-color: pink;
text-align: center;
}
span{
display:inline-block;
vertical-align: middle;
line-height: 20px;
width: 100px;
}
i{
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML代码:
<div>
<i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
</div>
参考资料:
- 作者张鑫旭发布文章中“inline-block元素间间隔大小与字体和文字大小之前的关系表截图”:http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮动布局-基于displayinline-block的列表布局/
- http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/
- http://blog.csdn.net/wu_xiaozhou/article/details/52924862
- http://www.cnblogs.com/xiaohuochai/p/5271217.html