html - 不需要的空间导航栏和第一部分

Question

我正在尝试删除导航栏和第一部分之间不需要的空间。

我已经尝试将第一部分的 margin 设置为 -4，但这是正确的做法吗？

我还将导航栏的 margin-bottom 设置为 0，并将 vertical-align 设置为居中，但这对我不起作用。

我的 html 代码:

* {
  padding: 0;
  margin: 0;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}


/*NAVBAR*/

.example3 .navbar-brand {
  height: 59px;
  margin-top: -4px;
}

.example3 .nav>li>a {
  padding-top: 19.5px;
  padding-bottom: 19.5px;
  font-size: 17px;
}

.example3 .navbar-toggle {
  padding: 18px;
  margin: 15px 15px 15px 0px;
}

#nav {
  background-color: rgba(19, 19, 19, 0.91);
  margin: 0 !important;
}

#navbutton {
  background-color: rgba(19, 19, 19, 0.91);
  color: rgba(240, 231, 232, 1.00);
}


/*LOGO TOEVOEGEN RESPONSIVE*/


/*WELKOM & LOGIN*/

#welkomlogin {
  text-align: center;
  color: white;
  background-image: url(public_html/images/HQ.png);
  background: linear-gradient(rgba(49, 49, 49, 0.50), rgba(49, 49, 49, 0.50)), url('public_html/images/HQ.png');
  background-size: 100%;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: black;
  height: 700px;
}

#welkom {
  text-align: center;
}

#login {
  text-align: center;
}


/*BUTTON*/

.buttonwelkom {
  margin: 10px 40px;
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.buttonwelkom:hover,
.buttonwelkom:active {
  text-decoration: none;
  color: #fff;
  background-color: #fff;
  /* fallback */
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  /* fallback */
  border-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

<div class="example3">
  <nav class="navbar navbar-inverse navbar-static-top" id="nav">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
        <a class="navbar-brand" href="index.html">
          <img src="public_html/images/afdeling.gif" alt="RC-logo" height="40px">
        </a>
      </div>
      <div id="navbar3" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Over ons</a></li>
          <li><a href="#">Meest gestelde vragen</a></li>
          <li><a href="#">Contact</a></li>
          <li>
            <button id="navbutton" class="btn btn-default navbar-btn" type="button">
									Inloggen
								</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<!--WELKOM-->
<section id="welkomlogin">
  <div id="welkom">
    <h1>Head titel</h1>
    <p>beschrijving....</p>
  </div>
  <!--INLOGGEN-->
  <div id="login">
    <a class="buttonwelkom" href="#">Inloggen</a>
    <a class="buttonwelkom" href="#">Over ons</a>
  </div>
</section>

Answer 1

这很可能是您的 h1 元素“突破”其容器 DIV 的折叠顶部边距。尝试添加

#welkom h1 {
  margin-top: 0;
}