在css中填充和删除白色[重复]答案

【问题标题】：Padding and removing white in css [duplicate]在css中填充和删除白色[重复]
【发布时间】：2018-06-23 11:36:45
【问题描述】：

刚接触 html 和 css，目前正在制作我自己的单页网站。

我在 css 中的填充和删除白色方面遇到了一些问题。

首先，我无法删除第一页和第二页之间的白色块...在我在第二页上输入任何文本之前，它可以吗？但是现在已经在页面上实现了一些，它已经出现了？

其次，如何正确推送文本？我的导航栏中有一个标题，但它没有包含在无序列表中？我是否正确设置了我的html？ css可以解决这个问题吗？我尝试在 html 上更改一些内容，但这只会让情况变得更糟。

[

HTML

<!DOCTYPE html>
<html>

<head>
  <link href="./Style.css" type="text/css" rel="stylesheet">
  <title> George Gilliland </title>
</head>

<body>
<div class = "Title-Page">
  <div class = "Nav">
    <ul>
      <li><a href="#About-Me">About Me</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
  </div>
     <h1 id = "Title"> George Gilliland </h1>
  </div>
</div>

  <div id = "About-Me">
     <p>
  Lorem ipsum dolor sit amet, ea nec oportere torquatos, has sumo <br>
  hinc vide et. In has aliquip eruditi, quis dicam sit ut.Tota 
  gubergren 
   </p>
  </div>

  <div id = "Projects">
  </div>

  <div id = "Contact">
  </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

 .Nav {
    border:1px solid #ccc;
    border-width:1px 0;
    font-family: Poiret One;
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 50cm;
}

.Nav ul {
  text-align: right;
}

.Nav li{
    display:inline;
}

.Nav a {
    display:inline-block;
    padding:10px;
}

body, html {
    height: 100%;
}

body {

  margin: 0;
  padding: 0;
  width: 100%;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

#Title {
  font-family: Poiret One;
  color: white;
  font-size: 60px;
  position: fixed;
  margin-top: 0;
}

#About-Me {
  background-color: #00818f;
  height: 100%;
}

h2.Font {
  font-family: Nixie One;
}

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
}

【问题讨论】：

您似乎遇到了margin-collpasing问题
stackoverflow.com/questions/6929874/…
不确定您是否有更多代码，但在您的情况下，p 和 h1 可能导致页边空白

标签： html css header navigation padding

【解决方案1】：

您可以在 about me P 上设置 0px 的边距顶部。请参阅下面的 codepen 和代码。

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
  margin-top: 0px;
}

https://codepen.io/BobDempsey/pen/QaBGvz

【讨论】：

我认为提供解释比没有任何提示的解决方案更好......他可以选择你的代码，解决问题，当他再次面对它时，他会回来问同样的问题.但是，如果他了解这个边距发生了什么，他就会得到它，并且他可以自己找到解决办法。