HTML中form和div出现间隙以及页面居中的问题

用HTML编写一个简单的用户注册页面，主体结构是：div+form+div，form和第二个div之间出现空隙。

设置margin和padding为0不起任何作用，按网上的说法将在form标签中设置display为inline。但这样背景效果消失，因此设为inline-block。修改的CSS代码：

form{background-color: rgba(121, 236, 201, 0.5);width: 80%;margin: auto;display: inline-block;}

此时空隙的问题解决了，但页面居中失效，实际上是margin: auto失效了。后面可以删除。

为了保持居中，在form的外层加了一个div作为其父标签，class设为“form”。在css中设置居中对齐，同时将存放输入框前文字的label标签设置为左对齐，添加的CSS代码：

.form{text-align: center} label{text-align: left;}

如果仔细看的话，表单和下面的div之间还是有细小的空隙，但是和上面的div之间完全没有，问题的解决似乎并不十分彻底。是不是还有更好的办法呢？

总结

以上是生活随笔为你收集整理的HTML中form和div出现间隙以及页面居中的问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。