HTML：块元素为何会产生间隙

时间：2018-06-27 11:15:32

标签： html css

我已经创建了带有标题，菜单和内容部分的HTML模板：

Code without block element 

<html>
	<head>
		<style>
#header {
	background-color: red;
	width: 100%;
	height: 85px;
}
#below-header {
	background-color: yellow;
	position: relative;
	height: 200px;
}
#menu {
	background-color: blue;
	position: absolute;
	width: 200px;
	height: 150px;
}
#content {
	padding-left: 200px;  /* menu */
	background-color: green;
	height: 150px;
}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="below-header">
			<div id="menu">menu</div>
			<div id="content">content</div>
			below-header
		</div>
	</body>
</html>

但是，当插入带有空白的块元素（例如h1标签）时，会有一个难看的间隙：

Code with block element 

<html>
	<head>
		<style>
#header {
	background-color: red;
	width: 100%;
	height: 85px;
}
#below-header {
	background-color: yellow;
	position: relative;
	height: 200px;
}
#menu {
	background-color: blue;
	position: absolute;
	width: 200px;
	height: 150px;
}
#content {
	padding-left: 200px;  /* menu */
	background-color: green;
	height: 150px;
}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="below-header">
			<div id="menu">menu</div>
			<div id="content">
				<h1>headline in content</h1>
			</div>
			below-header
		</div>
	</body>
</html>

删除边距或将h1元素转换为inline-block元素时，间隙消失了。

0 个答案:

没有答案
相关问题
最新问题