如何删除"欢迎"框上方和左侧的空白空间?
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
谢谢。
问候,micky。
它是 8px
margin
on body
。
body {margin: 0;}
将body
和html
设置为margin:0
和padding:0
body,html{
margin:0;
padding:0;
}
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
*{margin:0; padding:0;}
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
重置所有 padding
和 margin
只需 *{padding: 0; margin:0;}
您需要删除默认的身体保证金:
body {
margin: 0;
}
(Ansewering,因为我没有足够的声誉来评论以前的答案。)
确实是身体默认浏览器填充。
请注意,您可以使用某些CSS-Reset表避免使用某些或每个默认的浏览器行为。
我人类喜欢作为一个良好的重置基础。其他存在。
CSS重置背后的一般目标是确保每个浏览器自定义规则不会根据用户使用的浏览器破坏您的设计。
希望我能提供帮助。
#。页面是错误的选择器,我也没有得到你,为什么要将nav放在体外?而且我在不更改代码的情况下,我会随心所欲地输出Porper。
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<body>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>