为何我的inline-block元素顶部无故缩进？求解决方案

你遇到的#answers顶部缩进问题，根源是inline-block元素默认的垂直对齐方式是基线对齐。旁边的#next-question高度很高，会把#answers的基线拉到和它的基线一致，导致#answers整体向下偏移，看起来像是顶部缩进。

方案一：修正inline-block的垂直对齐 #

直接给#answers添加vertical-align: top，让它和其他inline-block元素顶部对齐，同时调整父容器确保元素能横向排列：

修改后的CSS：

#question-section {
  /* 确保子元素不会换行，溢出时可添加overflow-x:auto处理 */
  white-space: nowrap;
}

#image {
  /* 图片设为inline-block才能和其他元素横向并排 */
  display: inline-block;
  /* 根据实际需求调整尺寸 */
  width: 15rem;
  height: 17rem;
}

#answers {
  display: inline-block;
  width: 25rem;
  vertical-align: top; /* 关键：改为顶部对齐 */
  white-space: normal; /* 让内部按钮正常换行 */
}

#answers > button {
  margin: 1rem 2rem;
  width: 20rem;
}

#next-question {
  display: inline-block;
  /* 去掉float:right，避免布局混乱 */
  width: 3rem; 
  margin: 1.5rem;
  font-size: 4rem;
  border-radius: 0.5rem;
  color: white;
  background-color: var(--purple);
  height: 17rem;
  vertical-align: top; /* 同样设为顶部对齐 */
}

方案二：使用Flexbox（更推荐的现代布局方式） #

如果不需要兼容旧浏览器，直接给父容器#question-section设置flex布局，能更简单地实现横向并排，且避免inline-block的各种对齐问题：

修改后的CSS：

#question-section {
  display: flex;
  align-items: flex-start; /* 子元素顶部对齐 */
  gap: 1rem; /* 子元素之间的间距，替代margin */
}

#image {
  width: 15rem;
  height: 17rem;
}

#answers {
  width: 25rem;
}

#answers > button {
  margin: 1rem 2rem;
  width: 20rem;
}

#next-question {
  width: 3rem; 
  margin: 1.5rem;
  font-size: 4rem;
  border-radius: 0.5rem;
  color: white;
  background-color: var(--purple);
  height: 17rem;
}

为什么float:right能解决但会干扰布局？ #

float会让元素脱离正常文档流，不再遵循inline-block的基线对齐规则，所以#answers的缩进会消失，但float会让#next-question跑到容器最右侧，打破了图片、#answers、按钮的横向顺序，导致布局混乱，这显然不是你想要的。

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