HTML网页多个form表单间距不均匀问题解决求助

问题原因 #

第一个表单的「State」文字被包裹在<h3>标签中，h3标签默认自带上下外边距，其他表单的文字为无标签普通文本，无额外默认边距；同时你使用的<br>换行标签间距不固定，加上浏览器对form标签的默认边距规则，共同导致了表单间距不均匀。

修复方案 #

你只需要做2处简单修改即可解决：

1. 删除所有</form>结束标签后面的<br>标签，避免非可控的换行间距
2. 在你的<style>标签中新增以下2条CSS规则：

/* 统一所有表单的上下间距，数值可以根据你的需求自行调整 */
form {
  margin: 18px 0;
}
/* 清除h3标签的默认外边距，避免额外撑开间距 */
h3 {
  margin: 0;
}

如果不需要「State」文字和其他行文字的样式差异，你也可以直接去掉第一个表单里的<h3>和对应的</h3>标签，和其他行保持一致的普通文本样式即可。

内容的提问来源于stack exchange，提问作者Juan george Thomas