为什么我的内联 div 的高度不同？

Question

我在 html 页面上使用网格容器；在网格中的两个相邻 div 内，我有一些小 div。我希望这些小 div 出现在相同的高度，以便它们在页面上对齐。我想我已经给了它们相同的相关属性，但它们的高度略有不同，行间距也不同。为什么会发生这种情况以及如何补救？

相关信息：我在Chrome看我的HTML。

我的凹凸不平的图片： image of divs at uneven heights

相关代码：容器在 CSS 中定义如下：

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}

出现问题的容器的两列是第3列和第4列（2fr和4fr列）。这些 div 定义为：

 .wordDisplay {
  padding-top: 100px;
  text-align: center;
}

.display {
  padding-top: 100px;
}

而我想要出现在相同高度的小蓝框div是：

.a {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.a:hover {
  background-color: yellow !important;
}

.b {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.b:hover {
  background-color: yellow;
}

Answer 1

移除边距以获得全高，问题是，您将边距用于错误的目的保证金有不同的行为，你在使用它时必须小心。问问自己为什么要在这里使用它。您将其用作值并不意味着预期的结果，因为这取决于您的代码场景。我推荐你阅读这个 article

确保您清楚地了解页边距，您将知道发生了什么问题看涨保证金崩溃是件肮脏的事我会针对您的情况推荐两种修复方法：

如果你的 HTML 是这样的：

    <div class="container">
   <div class="wordDisplay">
      <div class="b">
         band
      </div>
      <div class="b">
         band
      </div>
   </div>
   <div class="display">
      <div class="a">
         b
      </div>
      <div class="a">
         a
      </div>
      <div class="a">
         n
      </div>
      <div class="a">
         d
      </div>
      <div class="a">
         b
      </div>
      <div class="a">
         a
      </div>
      <div class="a">
         n
      </div>
      <div class="a">
         d
      </div>
   </div>
</div>

将 class "a" 的边距更改为 class "b" 中边距的一半，因此如果你在 class "b" 中添加 margin:1%，则更改class "a" 中的保证金值调整为 0.5%，这样就可以解决您的问题。

将第 3 列和第 4 列的网格模板列更改为两个相等的分数

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}

为什么我的内联 div 的高度不同？

Why are my inline divs at different heights?

html

css

alignment