html - 为什么相同高度和宽度的内联 block 元素本身不垂直对齐

Question

为什么行内 block 元素不在垂直顶部对齐？如果我在所有 block 中都有相同的内容，那很好，但是我减少了一个 block 中的内容，它失去了对齐。在代码中 - 有四个定义了类 para1 和 css 的 div。第二个、第三个和第四个 div 都可以，但是第一个移到了下面，因为里面的内容少了。我可以通过 position 或使用 float 来解决问题，但需要了解为什么会这样？

.para1 {
  width: 24%;
  height: 200px;
  border: 2px solid red;
  display: inline-block;
}

<div>
  <div class="para1">

    <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor
      luctus.</p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

</div>

Answer 1

因为 default内联元素的垂直对齐方式是 baseline。将其更改为 middle 或 top 之类的内容，它们将按我认为您希望的方式对齐。

.para1 {
  width: 24%;
  height: 200px;
  border: 2px solid red;
  display: inline-block;
  vertical-align: top;
}

<div>
  <div class="para1">

    <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor
      luctus.
    </p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

  <div class="para1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula
      tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p>

  </div>

</div>