inline-block特性及常见问题

最新推荐文章于 2022-02-24 17:26:16 发布

cbkting

最新推荐文章于 2022-02-24 17:26:16 发布

阅读量1k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/cbkting/article/details/87575224

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

inline-block 特性及常见问题

代码运行的浏览器：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

cbkting

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
inline-block特性及常见问题

文章目录inline-block 特性及常见问题inline-block特性:inline-block如何去除缝隙？解决方法：1、删去元素之间的空白2、让闭合标签3、使用font-size:04、使用margin-right负值5、为inline-block元素添加样式float:left6、使用display:table和word-spacing（最优的方法）7、使用letter-spacing...
复制链接

扫一扫