设置相同上下padding却视觉不等，容器内元素未居中问题求助

一、上下内边距视觉不等的核心原因：外边距折叠 #

你看到的上下padding视觉不一致，是因为h1、h2这类标题标签默认自带上下外边距（margin），而你的.container容器没有设置能阻断外边距折叠的属性（比如border、padding、overflow:hidden），导致子元素的margin“溢出”到容器外部，和.splash的padding叠加后，视觉上上下间距就出现了差异。

二、修复上下内边距的方案 #

方案1：给.container添加overflow:hidden #

通过这个属性把子元素的margin限制在容器内部，避免溢出，让.splash的上下padding正常生效：

.container {
  max-width: 1140px;
  padding: 0 20px;
  margin: 0 auto;
  background: red;
  overflow: hidden; /* 新增属性 */
}

方案2：重置标题默认margin，手动控制间距 #

直接清除h1、h2的默认margin，再按需设置元素间的间距，控制更灵活：

.page-title, .page-subtitle {
  margin: 0; /* 重置默认margin */
}
.page-title {
  margin-top: 10px; /* 手动设置图标与标题的间距 */
  margin-bottom: 10px; /* 手动设置两个标题的间距 */
}

三、关于.container内元素居中的问题 #

你的代码里body { text-align: center; }已经让容器内的文本和图标实现了水平居中。如果觉得图标和标题的垂直对齐不协调，可以给图标添加垂直对齐属性：

.fa-solid.fa-user-secret {
  vertical-align: middle; /* 让图标和文字垂直居中对齐 */
}

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