现在我正在为一项任务开发一个网站，但虽然主要 (id 'main') div 位于顶部，但我的标题的 div 距离屏幕顶部 72 像素。我已经检查过，但找不到任何填充或边距问题。下面是我正在使用的 HTML 和 CSS 的副本。
我试过将上边距设置为 -72px，这很有效，但这意味着其余的 div 需要同样的东西，使它成为一个反复出现的问题。
下面是我正在使用的 HTML 和 CSS 的副本。
<!DOCTYPE html>
<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div id="title">
<p id="heading"> GC <br>
Woodturning </p>
</div>
</div>
</body>
</html>
body {
background-image: url('images/wood%20grain.jpg');
margin: 0px;
}
#main {
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 0px;
}
#title {
width: 1024px;
height: auto;
background-image: url('images/heading.jpg');
margin: 0px auto auto 0px;
padding: 0px;
}
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
最佳答案
您需要在标题中添加 margin: 0;。这是因为大多数浏览器会自动将其添加到 p 元素中:
p {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0px;
margin-end: 0px;
}
因此将您的 CSS 编辑为:
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
margin: 0; /* This is new */
}
关于html - 我的 HTML 代码中的一个 div 从屏幕顶部 float 72 像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35425729/