Question

漂亮的菜鸟问题我确定。我试图在更复杂的网页中更改背景颜色时遇到了这个问题，所以我从头开始并且仍然无法弄明白。 Here's the simplified page

我的目标是设置网站的背景颜色，但是使用正文这样做也没有任何效果，即使我已经填充了内容。所以我尝试设置背景颜色，而是遇到了一个全新的问题。标题不在网站的顶部，因为在主体元素本身上方有一个不需要的空间。我已经尝试将所有内容设置为边距0并将0填充为无效。这是我的代码：

＆＃13;

html {
	background-color: green;
}

.body {
	
	padding: 0;
	margin: 0;

}

#logo {
	font-size: 2rem;
	border-right: 1px solid grey;
	color: green;
}

header {
	border-bottom: 1px solid grey;
	background-color: white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="blah">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
  <header>
  	
  	<p id="logo">Path</p>
  
  </header>

  <section class="hero">
    
  </section>

  <section class="content">
    <p>hi</p>

  </section>



</body>
</html>

＆＃13;

Answer 1

你试过＆＃34;身体＆＃34;而不是＆＃34; .body＆＃34;？

Answer 2

尝试：

#logo {
margin-top: 0px ;
}

body {
 padding: 0px;
 margin: 0px;
}

Answer 3

尝试在CSS中添加此内容：

html,body,header,section,p{
    padding:0;
    margin:0;
    border:0;
}

它有效，没有多余的空间。

这里是小提琴：https://jsfiddle.net/osrrwrqn/

Answer 4

使用

nth-of-type

上面不需要的空间，没有背景颜色。

4 个答案: