如何在内层CSS Grid中对齐SVG按钮 消除列上方多余间隙

SVG按钮列上方的多余间隙由4个CSS逻辑问题共同导致：

• column-gap 不支持负值，你写的column-gap: -25px会被浏览器直接忽略，无法实现贴紧效果
• 多层Grid容器未固定列宽，使用auto值时浏览器会根据内容默认边距自动计算列宽，预留多余空隙
• 装上下两个SVG按钮的.column容器未设置Grid/Flex布局，内部按钮受默认行内块基线对齐规则影响，顶部隐式留出基线间隙
• 按钮默认带内边距、盒模型默认是content-box，1px边框会撑大按钮尺寸，导致对齐错位；h4标签默认带上下外边距，也会干扰Grid行高计算

直接替换对应CSS规则即可，不需要修改JSX结构：

.pizza-btn-grid {
  display: grid;
  grid-template-columns: 90px auto;
  grid-template-rows: auto;
  gap: 8px;
}

/* 统一标题默认边距，避免默认margin干扰布局 */
.select-pizza-size h4, .pizza-counting-grid h4 {
  margin: 0 0 4px 0;
  font-family: "Montserrat";
  font-size: 8px;
  font-weight: 600;
  color: rgb(85, 83, 83);
}

.select-pizza-size button {
  width: 25px;
  height: 25px;
  color: white;
  background-color: black;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  vertical-align: top;
}

.pizza-counter {
  display: grid;
  grid-template-columns: 45px 95px; /* 固定左侧操作列宽度，和按钮总宽度匹配 */
  column-gap: 0;
  height: 25px;
  align-items: start;
}

.pizza-counter-wrapper {
  display: grid;
  grid-template-columns: 25px 20px; /* 数字按钮25px+SVG按钮列20px，刚好45px */
  height: inherit;
  gap: 0;
}

.column {
  height: 25px;
  display: grid;
  grid-template-rows: 12.5px 12.5px; /* 上下两个SVG按钮各占一半高度 */
}

.column button {
  background-color: black;
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-of-pizzas {
  width: 45px;
  height: inherit;
}

.btn-pizza-count {
  width: 25px;
  height: inherit;
}

.pizza-counting-grid button svg {
  font-size: 8px;
}

.btn-svg {
  width: 20px;
  height: 12.5px;
}

.btn-svg button {
  width: 20px;
  height: 12.5px;
}

button {
  border-width: 1px;
  border-color: rgb(115, 115, 117);
  box-sizing: border-box;
}

button:hover {
  background-color: var(--orange);
  border: none;
}

.add-to-cart {
  display: flex;
  height: 25px;
}

.add-to-cart button {
  height: inherit;
  padding: 0 5px;
  font-size: 12px;
}

修复后数字选择按钮、上下SVG调整按钮、加购按钮会完全顶部对齐，不会出现SVG列上方的多余间隙，所有按钮边框严丝合缝，响应式缩放时也不会出现错位。

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