不确定为什么我的内联块元素会发生这种情况

Question

我对 CSS 很陌生，在下面的代码中，我的计划是创建 3 个 div 元素并设置它们的样式。这是我的代码：

我的代码：

.box {
  background: orange;
  width: 30%;
  height: 250px;
  margin: 0 1%;
  display: inline-block;
}

<body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>
  </div>
</body>

上面的代码就是我想要的结果

但是，一旦我尝试在 HTML 中的 div 元素中添加一些文本，这些框就会不对齐：

谁能解释一下这背后的原因？并告诉我如何解决这个问题？如果有任何帮助，我将不胜感激！

Answer 1

在 css 文件的开头试试这个：

* {
    box-sizing:border-box;
}

Answer 2

添加vertical-align:top.box

vertical-align:top;

.box {
  background: orange;
  width: 30%;
  height: 250px;
  margin: 0 1%;
  display: inline-block;
  vertical-align:top;
}

<body>
    <div class="container">
      <div class="box">
        fhgf
      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
    </div>
  </body>

Answer 3

我只是用grid box来处理你的问题，你也可以用flex box代替

  .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  background: orange;
  width: 90%;
  height: 250px;
  margin: 0 1%;

<body>
  <div class="container">
    <div class="box">
      hello
    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>
  </div>
</body>

不确定为什么我的内联块元素会发生这种情况

Not sure why this happens to my inline-block elements

html

css

display