登录表单背景无法全屏填充及底部空白问题求助

1. 页面背景填充问题 #

浏览器默认会给html和body添加margin和padding，直接设置body高度会因这些默认样式出现滚动条。修改方案如下：

html, body {
  /* 清除默认内外边距 */
  margin: 0;
  padding: 0;
  /* 确保元素高度至少覆盖整个视口 */
  min-height: 100vh;
  /* fuchsia-300 对应的十六进制颜色值 */
  background-color: #d946ef;
}

用min-height: 100vh替代固定height，既能保证背景铺满视口，又能在内容超出视口时自动延伸，不会出现不必要的滚动条。

2. 登录按钮下方空白问题 #

按钮下方的空白通常来自元素默认内外边距、inline-block元素的行间距，或者父容器的额外样式。常见修改方案：

方案一：清除父容器默认样式 #

如果按钮在表单(form)内，浏览器会给form添加默认margin，直接清除：

form {
  margin: 0;
  padding: 0;
}

方案二：重置按钮样式 #

将按钮转为块级元素并清除底部边距：

.login-button {
  display: block;
  margin-bottom: 0;
  /* 按需调整内边距，替换浏览器默认值 */
  padding: .5rem 1rem;
}

方案三：消除行间距影响 #

如果按钮是inline/inline-block类型，行高可能导致下方空白，设置父元素行高：

.button-container {
  line-height: 0;
}

内容的提问来源于stack exchange，提问作者ALTHAF ABDUL SALAM