我的注册表单css在页面上显示验证消息后被破坏

这是我提交前的表格：

这是我提交后的表格：

这是css为每个字段编写的内容：

.form-group {
    margin: 2% 0% 0% 0%;
    padding: 1% 1% 0% 0%;
}

此css用于错误消息：

.error {
    color: #FF0000;
    font-size: 0.9em;
    text-transform: capitalize;
}

请参见，在呈现验证消息之后，css正在中断，表单高度正在扩展。

---

如何在最小的空间内进行管理，使我的表单看起来很好？

不推荐的简单方法是：

.error {
    color: #FF0000;
    font-size: 0.8em;
    line-height: 0.8em;
    text-transform: capitalize;
}

查看组件是否仍从图像中脱落，如果脱落，请降低线条高度。

---

我强烈建议设置其他颜色，红色很难阅读或在其上添加一些背景。

看起来您对该图片有固定的高度，并且您的通知文本使框比图片大。将图片设置为100%高度，或将其设置为背景大小为：cover；的背景图像；。通知文本下面有一些超出空间。。。可能是空白或填充。背景大小没有问题。它标记为100%100%背景封面。。用firebug检查，文本没有任何额外的边距或填充。Ajay，做一个jsfiddle，它是img或它的容器高度。发布html/css代码！