Question

在我的HTML中，有一个体在视口的高度上伸展，而在视口中有一个包含文本段落的div。我的文字有一些余地，因此，它超出了身体。
我觉得这真的很奇怪，因为该段是div的孩子，这是一个身体的孩子，该段的边缘超过了他的父母。这有解决方案吗？（除了删除保证金，因为我想保留）提前致谢！

Picture
蓝色的东西实际上是身体（因为在右侧的检查器中选择了它。你看得很清楚它没有到达页面的顶部。

我的东西：

@font-face {
  font-family: "MavenPro";
  src: url('fonts/MavenPro-Medium.ttf');
}

@font-face {
  font-family: "MavenPro";
  src: url('fonts/MavenPro-Bold.ttf');
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  font-family: "MavenPro";
  background-image: url('../images/BIER.jpeg');
  background-color: white;
  background-size: cover;
  background-position: center;
}

p {
  margin: 10px;
}

#nav {
  position: relative;
  width: auto;
  float: left;
  top: 0;
  padding: 0;
  height: auto;
  height: 100%;
}

#menu {
  list-style-type: none;
  padding: 10px;
  margin: 10px 5px;
  display: inline-block;
  box-sizing: border-box;
}

.mitem {
  -webkit-transition-duration: 0.2s;
  background-color: #dea243;
  border-radius: 20px;
  padding: 10px;
  padding-left: 15px;
  padding-right: 35px;
  margin: 15px 5px;
  font-size: 20px;
  font-weight: bold;
  color: #ae4411;
}

.mitem:link {
  /*no css yet*/
}

.mitem:hover {
  -webkit-transition-duration: 0.2s;
  background-color: #d2b651;
  color: #cccccc;
  padding-left: 25px;
  padding-right: 25px;
}

.mitem:active {
  -webkit-transition-duration: 0.1s;
  padding-left: 30px;
  padding-right: 20px;
  background-color: #ee7744;
}

a:link,
a:visited {
  text-decoration: none;
  color: #0025ff;
  -webkit-transition-duration: 0.2s;
}

a:hover {
  -webkit-transition-duration: 0.2s;
  color: #0045ff;
}

a:active {
  -webkit-transition-duration: 0.2s;
  color: #ff4444;
}

#content {
  /*no css yet*/
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="css/mainstyle.css">
</head>

<body>
  <div id="nav">
    <ul id="menu">
      <a href="#link">
        <li class="mitem">Home</li>
      </a>
      <a href="#link">
        <li class="mitem">Alcohol</li>
      </a>
    </ul>
  </div>
  <div id="content">
    <p>paragraph</p>
    <p><a href="#link">Here is a link</a>
  </div>
</body>

</html>

Answer 1

将width: 100%;添加到段落元素和正文元素的CSS中。

这会挤压身体内的段落元素。

Answer 2

EDIT / ADDITION：

原因是您的p标记 - 它的边距设置（10px）。如果你添加它，上面的空格就会消失：

p:first-of-type {
  margin-top: 0;
}

http://codepen.io/anon/pen/jVqMBV

不相关的注释：li元素不应位于a标记内，它必须反过来。

HTML文字边距超出正文

2 个答案: