html - 停止 DIV 相互移动

Question

我有 2 个 div，我想将它们放在一起，但它们一直在相互移动。它们都在主 div 下。

HTML:

<div id="header">
  <div id="title">Social</div>
</div>
<div id="main">
  <div id='notif'><strong>Incorrect details.</strong>
  </div>
  <div id="signin">
    <form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
      <p>
        <input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
      </p>
      <p>
        <input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
      </p>
      <p>
        <input type="checkbox" name="remember" id="remember" value="checked">
        <label for="remember">Remember me</label>
      </p>
      <p>
        <input class="button" type="submit" value="Sign in">
      </p>
    </form>
  </div>
</div>

CSS如下:

两个div都属于的主体:

#main {
    padding-top: 50px;
}

表格格:

#signin {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 400px;
    margin: auto;
    margin-top: 150px;
}

错误分区:

#notif {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 400px;
    height: 20px;
    margin: auto;
    margin-top: 140px;
}

我知道这可能与 position 属性有关..

这是它现在的样子的图像，如您所见，我希望两个中心对象靠近在一起，而不会相互推离垂直中心。

Answer 1

从 #signin div 中删除 margin-top - 因为这是在 #notif div 和 #signin 之间放置像素的原因> 分区。

#main {
  padding-top: 50px;
}
#signin {
  padding-top: 5px;
  padding-bottom: 5px;
  width: 400px;
  margin: auto;
}
#notif {
  padding-top: 5px;
  padding-bottom: 5px;
  width: 400px;
  height: 20px;
  margin: auto;
  margin-top: 140px;
}

<div id="header">
  <div id="title">Social</div>
</div>
<div id="main">
  <div id='notif'><strong>Incorrect details.</strong>
  </div>
  <div id="signin">
    <form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
      <p>
        <input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
      </p>
      <p>
        <input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
      </p>
      <p>
        <input type="checkbox" name="remember" id="remember" value="checked">
        <label for="remember">Remember me</label>
      </p>
      <p>
        <input class="button" type="submit" value="Sign in">
      </p>
    </form>
  </div>
</div>

调试

在这种情况下，您的页面检查器将成为您最好的 friend 。

例如，在 chrome 中，当页面检查器打开时，将鼠标悬停在元素上会显示该元素的边距以及赋予它的任何填充。