float布局和display:inline-block导致盒子5px的上间距问题

最新推荐文章于 2022-08-21 17:36:46 发布

二进制女猿

最新推荐文章于 2022-08-21 17:36:46 发布

阅读量512

点赞数

分类专栏： # css 文章标签： css inline-block

本文链接：https://blog.csdn.net/OldStreet61/article/details/104268385

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、想要实现左右布局，采用float结合display:inline-block
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			.wrap {
				width: 100%;
				position: relative;
			}
			
			.left {
				width: 20%;
				position: relative;
				/*background: ;*/
				float: left
			}
			.left-div{
				height:200px;
				width:90%;
				background: pink;
				margin-top:20px;
			}
			.right {
				width: 70%;
				position: relative;
				float: left;
			}
			.right-div{
				width:30%;
				height:200px;
				background: deeppink;
				margin-top:20px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">
				<div class="left-div"></div>
				<div class="left-div"></div>
				<div class="left-div"></div>
			</div>
			<div class="right">
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
			</div>
		</div>
	</body>

</html>

出现的问题如下图，左侧和右侧height、margin-top设置相同，但是第二行开始left和right并未对齐，查找原因发现：是因为inline-block元素的容器默认会产生外边距，需要设置该父元素： font-size: 0;
在这里插入图片描述
修改后的代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			.wrap {
				width: 100%;
				position: relative;
			}
			.left {
				width: 20%;
				position: relative;
				/*background: ;*/
				float: left
			}
			.left-div{
				height:200px;
				width:90%;
				background: pink;
				margin-top:20px;
			}
			.right {
				width: 70%;
				position: relative;
				float: left;
				font-size: 0;
			}
			.right-div{
				width:30%;
				height:200px;
				background: deeppink;
				margin-top:20px;
				margin-right:5px;
				display: inline-block;	
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">
				<div class="left-div"></div>
				<div class="left-div"></div>
				<div class="left-div"></div>
			</div>
			<div class="right">
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
				<div class="right-div"></div>
			</div>
		</div>
	</body>
</html>