HTML/CSS 两个看似相等的元素，位置不同

Question

我正在尝试用 HTML 制作一个表单。我能解释的最好方法是展示我的代码。

HTML:

form div {
  position: relative;
  display: inline-block;
  height: 100px;
}
.inputContainer {
  display: inline-block;
}
.inputContainer input {
  display: block;
  width: 14em;
}
.inputTitle {
  display: inline-block;
  position: relative;
  bottom: 1.5em;
}

<form>
  <div>
    <div class="inputTitle">[Name]</div>
    <div class="inputContainer">
      <input type="text" name="lastName"></input><sup>last</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="firstName"></input><sup>first</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="middleName"></input><sup>middle</sup>
    </div>
  </div>
  <div>
    <div>[SS#]</div>
    <div class="inputContainer">
      <input type="text" name="socialFirst"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialMiddle"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialLast"></input>
    </div>
  </div>

</form>

在谷歌浏览器中: 有人可以解释为什么左上角的元素不从相同的 y 位置开始，因为高度属性向页面底部而不是顶部增加吗？

Answer 1

inline-block 元素的默认垂直对齐 是baseline。将 vertical-align 更改为 top。

form div {
  position: relative;
  display: inline-block;
  height: 100px;
  vertical-align: top;
}