html、body宽高都是100%，body里面一个div设置margin-top，body却跑下来了

左手喵子

于 2024-02-11 12:51:06 发布

阅读量434

点赞数 5

分类专栏： HTML CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136095370

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background: red;
				margin: 0px;padding: 0px;
			}	
			body{
				background: pink;
			}
			div{
				width: 100px;
				height: 100px;
				margin-top: 50px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div>111231234142</div>
	</body>
</html>

解决

给body设置一个上边框，跟背景颜色一致，然后设置其盒子模型为border-box就应该可以了。
　　body{
　　    border-top:1px solid #ffffff;
　　    box-sizing:border-box;
　　}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background: red;
				margin: 0px;padding: 0px;
			}	
			body{
				background: pink;
				border-top:1px solid #ffffff;
				box-sizing:border-box;
			}
			div{
				width: 100px;
				height: 100px;
				margin-top: 50px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div>111231234142</div>
	</body>
</html>

关注博主即可阅读全文