如何从网页顶部删除空间
如何从网页顶部删除空间
提问于 2016-02-02 01:42:10
我在Pluralsight上做了一个练习，但是我在挣扎于一个在视频上工作的部分，但是我的代码不起作用。
我玩过CSS，在MS和Google中尝试过，但是行为是一样的，所以我肯定遗漏了什么。
我在#包装器中添加了一个绿色边框来突出这个问题。在“世界”标题上方仍有一条红色边框。
下面是html5代码(超级基本的顺便说一句！)：
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
} <!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
对于如何解决这个问题，有什么见解会很好吗？此外，虽然问题较小，但它是我还是主体似乎比侧边栏高1或2个像素？
谢谢
更新-1：
我已经解决了这个问题，但我不明白为什么要解决这个问题。
在#main定义中，如果我将填充设置为1 1px，它将消除“World”标题上方的空白。如果它被设置为0，则它是可见的。如果是4，它会删除它，但我可以看到内容被进一步推入。
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}所以有人能向我解释为什么我必须把这个设置为1px才能消除这个空白，为什么当我设置为0时它会显示它呢？
谢谢。
蒂埃里
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-02 02:05:09
为<h2>添加margin:0或margin-top:0的CSS规则。这克服了元素的默认浏览器设置。
Stack Overflow用户
发布于 2016-02-02 01:56:36
h2标记自动从浏览器获取样式“-webkit- style from : 83em”。您必须显式地重置它：
-webkit-利润率-在此之前:0
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35143637
复制相关文章
相似问题
腾讯云开发者
