网站顶部的空白 [重复]
Posted
技术标签:
【中文标题】网站顶部的空白 [重复]【英文标题】：Whitespace on top of website [duplicate] 【发布时间】：2018-11-08 23:33:21 【问题描述】：我的网站顶部有一个空格，我想删除但不知道如何删除：
body
border: 0;
padding: 0;
margin: 0;
.header
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>开发工具告诉我它不能是maring、padding 或border....我真的不知道在这里做什么，感谢任何帮助。
【问题讨论】：
【参考方案1】：在这种情况下，空白是由浏览器样式表添加到h3 的边距引起的。如果你通过给h3 0 的边距来删除它，你就摆脱了空白。
body
border: 0;
padding: 0;
margin: 0;
.header
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
h3
margin-top: 0;
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>【讨论】：
我刚刚发现正是使用开发工具....我没有看到文本本身的边缘:) 不过谢谢。【参考方案2】：试试这个：
h3
margin: 0;
body
border: 0;
padding: 0;
margin: 0;
.header
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
h3
margin: 0;
<div class="header">
<h3 class="headerText">Test</h3>
</div>【讨论】：
【参考方案3】：在您的 CSS 中进行这些更改
body
border: 0;
padding: 0;
margin: 0;
.header
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
border: 0;
top: 0;
【讨论】：
【参考方案4】：您需要从headerText 中删除margin-top
body
border: 0;
padding: 0;
margin: 0;
.header
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
.headerText
margin-top: 0;
<div class="header"><h3 class="headerText">Test</h3>【讨论】：
【参考方案5】：将此添加到您的 css 文件之上。
*
margin: 0;
padding: 0;
【讨论】：
【参考方案6】：我强烈建议使用重置样式表，例如Eric Meyers。此链接还解释了它们是什么以及为什么要使用它们。
【讨论】：
我会调查的。谢谢。以上是关于网站顶部的空白 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在离子科尔多瓦上删除iPhone X顶部视口角落的空白[重复]