WordPress注册页面.form-contain div底部多余空白问题及解决咨询

底部空白的原因 #

最可能的原因是浏览器默认样式给<form>标签添加了底部外边距。多数浏览器的用户代理样式表（比如Chrome）会为<form>设置margin-block-end: 1em（等价于margin-bottom: 1em），由于你的.form-contain是display: flex的块级容器，子元素<form>的底部外边距会溢出容器，看起来像是容器自身出现了底部空白。

你之前添加的html, body { margin: 0; padding: 0; }只重置了根元素的边距，没有覆盖表单的默认样式，所以无效。

去除空白的解决办法 #

你可以任选以下一种方法：

• 直接重置表单的默认外边距：

.form-contain form {
    margin: 0;
}

• 给容器添加overflow: hidden，截断子元素溢出的外边距：

.form-contain {
    display: flex;
    align-items: center;
    border: 2px solid #ccc;
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者PRATAP KUMAR KOTTI