Question

我在Pluralsight上进行了一次练习，但是我正在努力学习一部似乎适用于视频的部分，但我的代码并没有。

我已经玩过CSS并在MS Edge和谷歌浏览器中试过它，但行为是一样的，所以我一定会遗漏一些东西。

我在#wrapper中添加了绿色边框以突出显示问题。＆＃34; The World＆＃34;上面还有一个红色边框。报头中。

这是html5代码（超级基本btw！）：

＆＃13;

DeltaPoseController

＆＃13;

	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;
	}

＆＃13;

有关如何解决此问题的任何见解都会很棒吗？此外，虽然是一个较小的问题，但它是我还是主体看起来比侧边栏高1或2个像素？

由于

UPDATE-1：

我已经解决了这个问题，但我不明白为什么要解决这个问题。

在#main定义中，如果我将填充设置为1px，则会消除“世界”之上的空白。头。如果设置为0，则可见。如果它是4，它将删除它，但我可以看到内容被进一步推送。

	<!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">
				&copy; 2015 The World Ltd
			</div>
		</div>
	</body>
	</html>

所以有人可以向我解释为什么我必须将此设置为1px才能消除这个差距，为什么当我设置为0时，它会显示它？

感谢。

亨利

Answer 1

h2标签获得样式＆＃34; -webkit-margin-before：83em＆＃34;自动从浏览器。您必须明确重置它：

-webkit-margin-before：0

Answer 2

使用<h2>或margin:0为margin-top:0添加CSS规则。这克服了元素的默认浏览器设置。

如何从网页顶部删除空间

2 个答案: