CSS样式指南中inline-block元素高度不一致问题求助

问题原因 #

Alkatra字体的字形自带更大的上下留白（字体的升部和降部高度比Roboto、Open Sans更高），再加上inline-block元素默认以基线对齐，导致该面板被内容撑得更高。

简单解决方案（选一种即可） #

方案1：给字体面板设置固定高度

直接给.font-panel添加固定高度，强制所有面板统一尺寸：

.font-panel{
  width:30%;
  margin:5px;
  color:white;
  text-align:center;
  display:inline-block;
  font-family: "Roboto Mono", serif;
  border-radius: 10px;
  border: 3px black dotted;
  background-color: beige;
  height: 130px; /* 根据实际内容调整数值 */
}

方案2：改用Flex布局（推荐，更易维护）

把.font-container改成Flex布局，子元素会自动等高，无需手动调整：

.font-container{
  border: 2px solid black;
  width:100%;
  display: flex; /* 启用Flex布局 */
  flex-wrap: wrap; /* 自动换行适配小屏幕 */
  gap: 10px; /* 控制面板间距，替代margin更整洁 */
  padding: 10px; /* 添加上下内边距，避免内容贴边 */
}

.font-panel{
  width:calc(33.33% - 10px); /* 计算宽度，减去gap的间距 */
  color:white;
  text-align:center;
  font-family: "Roboto Mono", serif;
  border-radius: 10px;
  border: 3px black dotted;
  background-color: beige;
  /* 去掉display: inline-block; */
}

方案3：统一文本样式+垂直对齐

如果不想改布局，给.font-panel设置顶部对齐，并统一内部文本的边距和行高：

.font-panel{
  width:30%;
  margin:5px;
  color:white;
  text-align:center;
  display:inline-block;
  font-family: "Roboto Mono", serif;
  border-radius: 10px;
  border: 3px black dotted;
  background-color: beige;
  vertical-align: top; /* 顶部对齐，避免基线对齐导致的高度差 */
}

.font-panel h2 {
  margin: 10px 0; /* 统一h2的上下边距 */
  line-height: 1.2; /* 统一行高，减少字体差异影响 */
}

修改后的完整代码示例（以Flex布局方案为例） #

CSS代码

h1{
  font-family:'Roboto', serif;
  font-weight:bold;
}

.color-container, .font-container{
  border: 2px solid black;
  width:100%;
  margin: 15px 0; /* 添加容器间距，页面更美观 */
}

.font-container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

h2{
  margin:5px;
  font-family: "Roboto Mono", serif;
}

.color-panel{
  width:30%;
  margin:5px;
  color:white;
  text-align:center;
  display:inline-block;
  font-family: "Roboto Mono", serif;
  border-radius: 10px;
  border: 3px black dotted;
}

.font-panel{
  width:calc(33.33% - 10px);
  color:white;
  text-align:center;
  font-family: "Roboto Mono", serif;
  border-radius: 10px;
  border: 3px black dotted;
  background-color: beige;
}

.coolblue{
  background-color: #005073;
}

.pink{
  background-color: #FFC0CB;
}

.orange{
  background-color: #FFA500;
}

#roboto{
  font-family:"Roboto", serif;
}

#alkatra{
  font-family: "Alkatra", serif;
}

#opensans{
  font-family: "Open Sans", serif;
}

HTML代码

<html>
  <head>
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Alkatra&amp;display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>My CSS style guide</h1>
    
    <div class="container">
      <div class="color-container">
        <h2>Color styles:</h2>
        <hr>
        <div class="color-panel coolblue">
          <h2>Cool blue</h2>
          <p>Hex: #005073</p>
        </div>
        <div class="color-panel pink">
          <h2>Pink</h2>
          <p>Hex: #FFC0CB</p>
        </div>
        <div class="color-panel orange">
          <h2>Orange</h2>
          <p>Hex: #FFA500</p>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="font-container">
        <h2>Font styles:</h2>
        <hr>
        <div class="font-panel alkatra">
          <h2 id="alkatra">Alkatra</h2>
          <p>Hex: #005073</p>
        </div>
        <div class="font-panel opensans">
          <h2 id="opensans">Open Sans</h2>
          <p>Hex: #FFC0CB</p>
        </div>
        <div class="font-panel roboto">
          <h2 id="roboto">Roboto</h2>
          <p>Hex: #FFA500</p>
        </div>
      </div>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者haxxorman