如何保留100vh高度的同时消除CSS区块的溢出与间隙？

问题根源分析 #

• 间隙问题：主要是元素默认margin/padding导致的高度叠加，比如h1和p的外边距会让区块实际高度超过100vh，再加上浏览器默认的body、main边距，就会产生间隙。
• 溢出问题：CSS语法错误（p元素的font-size后缺失分号）导致样式失效，同时未设置盒模型规则，内边距和外边距撑开元素，加上内容尺寸过大，引发溢出。

具体解决步骤 #

1. 修复CSS语法错误

#welcome-section p的font-size属性后缺少分号，这会导致后续样式失效，先补上：

#welcome-section p {
  font-size: 1.5rem; /* 补上分号 */
  margin: 2em;
  padding: 1.5em;
}

2. 全局重置默认样式，统一盒模型

添加全局样式重置，消除浏览器默认边距，同时设置box-sizing: border-box确保内边距/边框不会撑开元素尺寸：

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

body, main {
  margin: 0;
  padding: 0;
}

3. 调整区块内部样式，控制高度与溢出

修改#welcome-section及其子元素的样式，避免内容超出视口高度，同时优化布局：

#welcome-section {
  min-height: 100vh;
  font-family: 'Dancing Script', cursive;
  text-align: left;
  font-size: 1rem;
  width: 100%;
  /* 用flex布局垂直居中内容，避免顶部空白 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 控制内边距，避免内容贴边 */
  padding: 1rem;
}

#welcome-section h1 {
  font-size: 5rem;
  text-align: center;
  font-family: 'Dancing Script', cursive;
  /* 减少margin，避免占用过多高度 */
  margin: 0 0 1rem 0;
  padding: 0;
  color: blueviolet;
}

#welcome-section p {
  font-size: 1.5rem;
  /* 调整边距，限制宽度避免溢出 */
  margin: 0 auto;
  padding: 0;
  max-width: 80%;
  line-height: 1.6; /* 优化行高，提升可读性 */
}

关键说明 #

• box-sizing: border-box是核心：让元素的内边距和边框包含在设置的宽度/高度内，彻底解决溢出问题。
• Flex布局既可以实现内容垂直居中，又能避免因子元素margin导致的高度叠加问题。
• 减少不必要的margin/padding：过大的内边距和外边距是导致区块超出视口高度、出现间隙的主要原因。

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