Html CSS的行为非常奇怪，特别是间距

我正在制作一个带有注册表单的页面，供新用户访问我的ASP.NET站点以创建帐户。我已从以下URL复制了一个响应性水平CSS表单模板：。我的网站上使用此表单的页面是。如果您仔细观察，您会清楚地看到一些样式问题。首先，我将向您展示HTML和CSS的重要部分：

HTML:

正如您所看到的，我对原始源代码中提供的一些代码进行了调整，但这是我唯一改进的代码，因为它在我这方面看起来有所不同。有关完整的CSS样式表，请转到。以下是我的问题：

1） 没有

h1

标题，甚至只有普通的HTML文本（如标有星号（*）的文本意味着该字段是必需的，并且ASP.NET复选框旁边的文本）显示，尽管它显示在Visual Studio的设计文件中

2） 对于最下面的一行，间距和边界显然存在一些问题。蓝色边框将出现，但它比上面行上的蓝色边框更厚，同时还有一些空白，底部行上的每一列都有不均匀的高度和填充。我尝试过调整和试验许多不同的

填充

和

边距

值，但仍然不均匀。最后，我还做了一个换行（

）以在表单字段和ASP.NET CreateUserWizard控件之间留出一些空间，但它也没有被应用

我们将不胜感激。谢谢

1）从

表单

选择器中删除

字体大小：0

，以查看标题

form {
  display: block;
  margin: 30px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #7eaf4a;
  border-radius: 5px;
  font-size: 0;         /* <- remove this */
}

我对

Required

元素和媒体查询进行了一些更新，以使响应性设计能够正常工作，并包含了上述修复。 下面的片段：

@导入url(http://fonts.googleapis.com/css?family=Laila:400,700);
@导入url（'https://fonts.googleapis.com/css?family=Damion|Muli:400600’；
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
保证金：0自动；
文本对齐：居中；
字体大小：100%；
字体：继承；
垂直对齐：基线；
大纲：无；
-webkit字体平滑：抗锯齿；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html{overflow-y:scroll；}
身体{
字体系列：Arial、Tahoma、无衬线字体；
背景：#e2eef4；
字体大小：62.5%；
线高：1；
填充顶部：40px；
}
.red{color:red}
输入，文本区域{
-webkit字体平滑：抗锯齿；
大纲：无；
}
strong，b{字体大小：粗体；}
em，i{font-style:italic；}
h1{
显示：块；
字体大小：3.1米；
线高：1.45em；
字体系列：“Laila”，衬线；
文本对齐：居中；
字体大小：粗体；
文本阴影：1px 1px 0#fff；
背景色：#ebf442；
}
/**表单字段**/
形式{
显示：块；
利润率：30像素；
溢出：隐藏；
背景：#fff；
边框：3px实心#7eaf4a；
边界半径：5px；
/*字号：0*/
}
表单>分区>标签{
显示：块；
填充：20px 20px 10px；
垂直对齐：顶部；
字体大小：13px；
字体大小：粗体；
文本转换：大写；
颜色：#939393；
光标：指针；
}
表单>分区开关>标签{
填充：22px 20px 18px；
}
.col-3、.col-4{
边框底部：3px实心#0026ff！重要；
右边框：3px实心#0026ff！重要；
背景色：#ebf442；
垂直对齐：顶部；
最小高度：100px；
}
.col-4{
浮动：左；
}
标签>输入{
显示：内联块；
位置：相对位置；
宽度：100%；
高度：27px；
线高：27px；
保证金：5px-5px 0；
填充：7px 5px 3px；
边界：无；
大纲：无；
颜色：#555；
字体系列：“Helvetica Neue”，Arial，无衬线；
字体大小：粗体；
字体大小：14px；
不透明度：.6；
过渡：全线性。3s；
}
标签>选择{
显示：块；
宽度：100%；
填充：7px 5px 3px；
保证金：5px-5px 0；
颜色：#555；
字号：500；
高度：35px；
边界：无；
大纲：无；
字体系列：“Helvetica Neue”，Arial，无衬线；
字体大小：14px；
不透明度：.6；
过渡：全线性。3s；
}
上校提交{
文本对齐：居中；
填充：20px；
}
标签>输入：焦点，标签>选择：焦点{
不透明度：1；
}
/**基于web的按钮设计http://codepen.io/guvootes/pen/eyDAb **/
钮扣{
宽度：100%；
高度：35px；
边界：无；
边界半径：4px；
利润率：0.15px0；
字体大小：14px；
颜色：#fff；
字体大小：粗体；
文本阴影：1px1p0RGBA（0,0,0,0.3）；
溢出：隐藏；
大纲：无；
}
按钮.submitbtn{
背景图像：-莫兹线性梯度（#97c16b，#8ab959）；
背景图像：-webkit线性渐变（#97c16b，#8ab959）；
背景图像：线性梯度（#97c16b，#8ab959）；
边框底部：1px实心#648c3a；
光标：指针；
颜色：#fff；
}
按钮。提交：悬停{
背景图像：-moz线性梯度（#8ab959，#7eaf4a）；
背景图像：-webkit线性梯度（#8ab959，#7eaf4a）；
背景图像：线性梯度（#8ab959，#7eaf4a）；
}
按钮。submitbtn：激活{
高度：34px；
边界底部：0；
保证金：1px0；
背景图像：-moz线性梯度（#7eaf4a，#8ab959）；
背景图像：-webkit线性梯度（#7eaf4a，#8ab959）；
背景图像：线性梯度（#7eaf4a，#8ab959）；
-moz盒阴影：插入0 1px 3px 1px rgba（0,0,0,0.3）；
-webkit盒阴影：插入0 1px 3px 1px rgba（0,0,0,0.3）；
长方体阴影：插入0 1px 3px 1px rgba（0,0,0,0.3）；
}
#底部部分{
背景
form > div.switch > label {
   padding: 22px 20px 18px;
}

label > input {
   display: inline-block;
   position: relative;
   width: 100%;
   height: 27px;
   line-height: 27px;
   margin: 5px -5px 0;
   padding: 7px 5px 3px;
   border: none;
   outline: none;
   color: #555;
   font-family: 'Helvetica Neue', Arial, sans-serif;
   font-weight: bold;
   font-size: 14px;
   opacity: .6;
   transition: all linear .3s;
}

label > select {
   display: block;
   width: 100%;
   padding: 7px 5px 3px;
   margin: 5px -5px 0;
   color: #555;
   font-weight: 500;
   height: 35px;
   border: none;
   outline: none;
   font-family: 'Helvetica Neue', Arial, sans-serif;
   font-size: 14px;
   opacity: .6;
   transition: all linear .3s;
}

form {
  display: block;
  margin: 30px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #7eaf4a;
  border-radius: 5px;
  font-size: 0;         /* <- remove this */
}

.col-3, .col-4 { 
  border-bottom: 3px solid #0026ff;
  border-right: 3px solid #0026ff;
  background-color: #ebf442;
  vertical-align: top;
  min-height: 100px;
}