CSS使用display:inline-block会产生的问题以及解决的方法

最新推荐文章于 2022-09-01 17:58:39 发布

爱码士&

最新推荐文章于 2022-09-01 17:58:39 发布

阅读量610

点赞数 1

分类专栏：前端 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_48005981/article/details/117619997

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

问题复现

问题: 两个display：inline-block元素放到一起会产生一段空白。

如代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.container {
				width: 800px;
				height: 200px;
			}
			
			.left {
				font-size: 14px;
				background: #bfa;
				display: inline-block;
				width: 100px;
				height: 100px;
			}
			
			.right {
				font-size: 14px;
				background: #f0f;
				display: inline-block;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>

		<div class="container">
			<div class="left">
				左
			</div>
			<div class="right">
				右
			</div>
		</div>

	</body>
</html>

效果如下:

产生空白的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决方法

（1）将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="container">
    <div class="left">
        左
        </div><div class="right">
        右
    </div>
</div>

（2）父元素中设置font-size: 0，在子元素上重置正确的font-size

.container{
    width:800px;
    height:200px;
    font-size: 0;
}

（3）为子元素设置float:left（right也是同理）

.left{
    float: left;
    font-size: 14px;
    background: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

爱码士&

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录