停止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;
}

表格div：

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

错误div：

#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 div之间放置像素。

#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>

调试

在这种情况下，您的页面检查员将成为您最好的朋友。

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