This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(8个答案)
Why does this CSS margin-top style not work?
(13个回答)
2年前关闭。
我在网站上方有一个空白,我想删除但不知道如何:
开发工具告诉我,它不能破坏,填充或边界....我真的不知道该怎么做,任何帮助都值得赞赏。
(8个答案)
Why does this CSS margin-top style not work?
(13个回答)
2年前关闭。
我在网站上方有一个空白,我想删除但不知道如何:
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>
开发工具告诉我,它不能破坏,填充或边界....我真的不知道该怎么做,任何帮助都值得赞赏。
最佳答案
在这种情况下,空格是由浏览器样式表添加到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>