如何删除垂直堆叠的div之间的空间？

时间：2016-12-29 14:18:13

标签： html css

我已经尝试编辑div 1和div 2之间的空格但是差距仍然存在（边距和填充。我尝试编辑父div上的属性，但是子div会超出父级。我知道我'我可能没有正确看待问题。感谢您的帮助。

html {
overflow:
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0; /* remove default margin */
  transition-property: background-position;
}

div#container{
  height: 100%;
  margin: 0;
}

div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}

.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}

.navbar{
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;

}

div#static_nav a{
  color: white;
  text-decoration: none;
  padding-right: 20px;
}

div#static_nav a:hover{
  color: #8E8E8E;
}

div#block_one, div#block_two, div#block_three,
div#block_four{
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;

}

div#block_one{
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}

div#logo{
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}

.heading{
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}

div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}

div#quote{
  padding-top:;
  padding-bottom:;
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}

div#vis{
margin-left: 20px;
font-family: 'Heebo', sans-serif;
background-color: red;
height: 50%;
}


div#block_five{
  height: 30vh;
  background-color: #F5F5F5;
}
<!DOCTYPE html>

<html lang = "en">
<meta charset = "utf-8" />

<head>
  <link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
  <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id = "container">

    <header>
      <div id = "static_nav">
        <nav class = "navbar">
          <a href = "#block_one">Home</a>
          <a href = "#block_two">About</a>
          <a href = "#block_four">People</a>
          <a href = "#block_five">Contact</a>
          <a href = "">Log In</a>
        </nav>
      </div>
    </header>


  <div id = "block_one">
    <div id = "logo">
    </div>
  </div>

  <div id = "block_two">
    <header class = "heading">
      TEST
    </header>
    <div id = "subhead">
    <div id = "quote">
      <p>Div 1</p>
    </div>
    <div id = "vis">
      <p>Div 2</p>
    </div>
  </div>

  <div id = "block_three">
  </div>

  <div id = "block_four">
  </div>

  <div id = "block_five">
  </div>

</div>
</html>

3 个答案:

答案 0 :(得分：2)

设置#subhead p margin: 0;。您margin-left: 20px;上有#vis向右推，可以对其进行评论或删除，添加padding-left: 20px;以将文字与div1对齐，但随时可以将其删除。除此之外，您在我评论的#quote padding上也有空值。

＆＃13;
＆＃13; 
html {
  overflow:
}
body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0;
  /* remove default margin */
  transition-property: background-position;
}
#subhead p {
  margin: 0;
}
div#container {
  height: 100%;
  margin: 0;
}
div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}
.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}
.navbar {
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;
}
div#static_nav a {
  color: white;
  text-decoration: none;
  padding-right: 20px;
}
div#static_nav a:hover {
  color: #8E8E8E;
}
div#block_one,
div#block_two,
div#block_three,
div#block_four {
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;
}
div#block_one {
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}
div#logo {
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}
.heading {
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}
div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}
div#quote {
  /*padding-top: ;
  padding-bottom: ;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}
div#vis {
  /*margin-left: 20px;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  background-color: red;
  height: 50%;
}
div#block_five {
  height: 30vh;
  background-color: #F5F5F5;
}
＆＃13; 
<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8" />

<head>
  <link rel="stylesheet" type="text/css" href="tof_css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id="container">

    <header>
      <div id="static_nav">
        <nav class="navbar">
          <a href="#block_one">Home</a>
          <a href="#block_two">About</a>
          <a href="#block_four">People</a>
          <a href="#block_five">Contact</a>
          <a href="">Log In</a>
        </nav>
      </div>
    </header>


    <div id="block_one">
      <div id="logo">
      </div>
    </div>

    <div id="block_two">
      <header class="heading">
        TEST
      </header>
      <div id="subhead">
        <div id="quote">
          <p>Div 1</p>
        </div>
        <div id="vis">
          <p>Div 2</p>
        </div>
      </div>

      <div id="block_three">
      </div>

      <div id="block_four">
      </div>

      <div id="block_five">
      </div>

    </div>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

浏览器样式默认将<p>元素定义为1em的上下边距。您只需要一条规则来消除这些默认段落样式，如下所示：

#subhead p {
  margin: 0;
}

答案 2 :(得分：1)

你的p在#vis下面有不必要的margin-top，你应该删除它以摆脱差距

#vis p {
  margin: 0;
}
相关问题
最新问题