div 项，弄乱了 CSS 布局

Question

为什么布局乱七八糟？ 为什么 p 元素会这样做？ 为什么第一个 div 离页面底部更近一点

#pricing div {
  display: inline-block;
  width: 30%;
  height: 200px;
  border: solid 2px black;
}

<section id="pricing">
  <div id="plan-1m">
    <!--try without p -->
    <p>why this p messes up the layout?</p>
  </div>
  <div id="plan-3m">
  </div>
  <div id="plan-12m">
  </div>
</section>

Answer 1

您应该将 vertical-align: top; 添加到您的 div 元素。

默认值是 vertical-align: baseline;，据我了解 the documentation，它试图将你的 p 的底部与其他 div 的底部对齐（因为它们没有任何内容）