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

Question

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

但是，当我将 p tags(class forget) 添加到第二个同级 div 的底部时，第一个 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/我猜它们在您的重置中设置为基线或中间(如果您正在使用)。