为什么当 p 标签添加到同级 div 的底部时，我的 div 被下推

Question

我有两个div 并排坐在表单元素中。通常，它们都排列在表单的顶部。

但是，当我在第二个同级div 的底部添加 p 标签(类忘记(时，第一个div 从表单顶部向下推。第二个div 紧靠表单元素的顶部。

我不明白为什么第二个兄弟div 底部的 p 标签在第一个div 的顶部添加边距/填充。

一个线索是设置vertical-align: top可以解决问题，但我想知道是什么原因造成的。

form {
  color: white;
  width: 430px;
  height: 80px;
  float: right;
  border: 1px solid black;
}
.formEmail,
.formPassword {
  border: 1px solid white;
  width: 165px;
  height: 100%;
  font-size: 13px;
  margin-right: 10px;
  display: inline-block;
}

<form id="logIn">
  <div class="formEmail">
    <p>Email or Phone</p>
    <input type="text" name="emailphone">
  </div>
  <div class="formPassword">
    <p>Password</p>
    <input type="text" name="password">
    <p class="forget">Forget Account?</p>
  </div>
</form>

Answer 1

您需要将

vertical-align: top添加到两个div：https://jsfiddle.net/pobbLs21/它们设置为基线或中间，我猜在您的重置中(如果您使用的是(。

Answer 2

只需将overflow:hidden;添加到div 中即可

form {
  color: white;
  width: 430px;
  height: 80px;
  float: right;
  border: 1px solid black;
}
.formEmail,
.formPassword {
  border: 1px solid white;
  width: 165px;
  height: 100%;
  font-size: 13px;
  margin-right: 10px;
  display: inline-block;
  overflow: hidden;
}

<form id="logIn">
  <div class="formEmail">
    <p>Email or Phone</p>
    <input type="text" name="emailphone">
  </div>
  <div class="formPassword">
    <p>Password</p>
    <input type="text" name="password">
    <p class="forget">Forget Account?</p>
  </div>
</form>