求助：解析CSS布局异常偏移的原因及解决方案合理性

一、布局偏移的根本原因 #

这个问题的核心是内联级元素的基线对齐机制：

• h1设置为inline-block，.format-select-wrapper设置为inline-grid，两者都属于内联级元素，在同一行时默认遵循基线对齐规则——元素的基线会与父级容器的基线对齐。
• inline-grid容器的基线默认由第一个网格项的基线决定。当选中第一个label时，你修改了它的height、width和font-size，直接改变了第一个网格项的基线位置，进而导致整个inline-grid容器的基线偏移。
• 由于h1和inline-grid容器是基线对齐的，容器的基线偏移会带动h1的位置发生变化，最终表现为整体布局偏移。
• 后两个label的尺寸变化不会触发偏移，因为它们不是第一个网格项，inline-grid容器的基线始终由第一个项的位置决定，修改后两个项不会改变容器的基线位置。

二、flex父容器解决方案的合理性 #

这个解决方案完全合理，理由如下：

• flex布局会彻底改变子元素的对齐规则：当把h1和inline-grid容器放入display: flex的父容器后，两者成为flex子项，不再遵循内联元素的基线对齐逻辑，而是遵循flex布局的对齐规则。
• flex容器默认的align-items值是stretch，你也可以根据需求调整为center/flex-end等，flex子项的对齐完全由flex容器控制，不会再受内部元素尺寸变化的牵连。
• flex布局本身就是为解决传统内联/块级排版的对齐痛点设计的，用它来规避基线对齐带来的意外偏移，是非常贴合场景的解决方案。

修正后的示例代码 #

CSS 代码

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(236, 236, 236);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  min-height: 100vh;
}

/* 新增flex父容器样式 */
.header-wrapper {
  display: flex;
  align-items: end; /* 保持原有的底部对齐效果 */
  gap: 5.5rem; /* 替代h1的margin-right，更符合flex布局逻辑 */
  margin-block: 1.5rem;
  padding-inline: 1.25rem;
}

h1 {
  color: rgb(113, 0, 179);
  /* 移除原有的margin，改用flex容器的gap控制间距 */
  margin: 0;
}

.format-select-wrapper {
  align-items: end;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 1rem;
  width: 627px;
}

input[type="radio"] {
  display: none;
}

label {
  background: rgb(113, 0, 179);
  border-radius: 5px;
  box-shadow: 0px 2px 0px black;
  color: whitesmoke;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
  margin-inline: auto;
  padding: 1.25rem 2rem;
  text-align: center;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  user-select: none;
  width: 95%;
}

label:hover,
label:focus-visible {
  background: rgb(84, 44, 102);
}

input[type="radio"]:checked + label {
  background: rgb(158, 0, 250);
  font-size: 0.9rem;
  height: 47px;
  width: 175px;
}

HTML 代码

<div class="header-wrapper">
  <h1>Music Collection Catalog Lookup</h1>

  <div class="format-select-wrapper">
    <input type="radio" name="format" id="btn-records" value="Records" />
    <label for="btn-records">RECORDS</label>
    <input type="radio" name="format" id="btn-tapes" value="Tapes" />
    <label for="btn-tapes">TAPES</label>
    <input type="radio" name="format" id="btn-cds" value="CDs" />
    <label for="btn-cds">CDS</label>
  </div>
</div>

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