为什么使用边距时会影响其他类[重复]答案

【问题标题】：Why does it affect other classes when you use margins [duplicate]为什么使用边距时会影响其他类[重复]
【发布时间】：2019-02-06 21:05:38
【问题描述】：

我只想给 loginContainer 类留边距，但它也影响到 Navbar 为什么？

#loginContainer {
  width: 500px;
  height: 400px;
  background-color: #CCCCCC;
  text-align: center;
  margin: 100px auto;
}

#navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  box-shadow: 2px 2px 1px 1px #CCCCCC;
  background-color: white;
  position: fixed;
}

<div id="navbar">
  <div id="navbarLeft">
  </div>enter code here
  <div id="navbarMenu">
    <ul>
      <li class="menuCell">LGN</li>
      <li class="menuCell">BBS</li>
    </ul>
  </div>
</div>
<!-- login form section -->
<div id="loginContainer">
  <div id="loginBox">
    <h1 class="loginText">Login</h1>
    <input type="text" class="inputBox" placeholder="ID" name="userID" maxlength="20">
    <input type="password" class="inputBox" placeholder="PASSWORD" name="userPassword" maxlength="20">

  </div>
</div>

【问题讨论】：

你在使用任何 CSS 库吗？

标签： html css

【解决方案1】：

在#navbar( top: 0;left : 0 ; right : 0)上添加css，这会对你有所帮助。

#loginContainer{
    width: 500px;
    height: 400px; 
    background-color: #CCCCCC;
    text-align: center;
    margin: 100px auto;
}
#navbar{
    width: 100%;
    height: 50px;
    overflow: hidden;
    box-shadow: 2px 2px 1px 1px #CCCCCC;
    background-color: white;
    position: fixed;
    top: 0;
}

    <div id = "navbar">
      <div id = "navbarLeft">
      </div>enter code here
      <div id = "navbarMenu">
          <ul>
              <li class = "menuCell">LGN</li>
              <li class = "menuCell">BBS</li>
          </ul>
      </div>
  </div>
  <!-- login form section -->
  <div id = "loginContainer">
      <div id = "loginBox">
          <h1 class = "loginText">Login</h1>
          <input type = "text" class = "inputBox" placeholder = "ID" name = "userID" maxlength="20">
          <input type = "password" class = "inputBox" placeholder = "PASSWORD" name = "userPassword" maxlength="20">

      </div>
  </div>

【讨论】：