欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

页面顶部元素与body共享margin导致出现滚动条

程序员文章站 2022-03-25 14:54:43
...

body里面有个div,html和body高度都是100%,margin和padding都是0,内部div设置了一个margin-top,body就出现了滚动条。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		html,body{
			height: 100%;
			margin:0;
			padding:0;
		}
		.test{
			height:400px;
			margin:40px;
			background:#0f0;
		}
	</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

出现原因:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。所以div的margin-top与body共享了,这样就让body把html撑大了

解决方案:

1.  body中添加

body{
  overflow-y:hidden;
}


相关标签: 布局