Html 增加表单框之间的填充

我正在尝试将输入框之间的空间增加48px。这似乎是一个简单的解决方案；但是，我无法使输入框移动。如果有人能帮我，我会非常感激

名字
姓
请输入有效的电子邮件地址
电子邮件地址
请输入一个有效的电话号码
电话号码
城市
州/省
公司
评论
--没有--
来访者
镶嵌


--没有--
内部的
贸易展览会
网站
直销
社会化媒体
另外


身体{
颜色：#fff；
背景色：#30bda6；
文本对齐：居中；
}
形式{
颜色：#fff；
背景色：#30bda6；
文本对齐：居中；
字体系列：Lato；
}
* {
框大小：边框框；
}
.表格名称{
字号：38px；
颜色：#fff；
字体系列：“Lato”；
字母间距：70px；
}
输入{
字体大小：15px；
高度：48px；
边缘顶部：8px；
}
输入[type=“tel”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
字体大小：15px；
高度：48px；
}
输入[type=“text”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
字体大小：15px；
}
输入：焦点{
背景色：#fff；
}
输入[type=“text”]：焦点{
背景色：#fff；
}
输入[type=“text”]：已访问{
背景色：#fff；
}
输入[type=“tel”]：焦点{
背景色：#fff；
}
输入[type=“tel”]：已访问{
背景色：#fff；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
填充：5px0；
}
文本区{
宽度：100%；
背景色：#30bda6；
边框：1px实心#fff；
}
文本区域：焦点{
背景色：#fff；
}
#公司{
弹性基准：100%；
最大宽度：100%；
}
标签：第n个最后一个子项（-n+2）{
弹性基准：100%；
最大宽度：100%；
}
选择
标签{
高度：50px；
宽度：48%；
利润率：2%1%；
文本对齐：左对齐；
字体系列：“Lato”；
字体大小：15px；
}
#潜艇{
边界半径：6px；
宽度：120px；
高度：35px；
文本转换：大写；
显示：块；
边缘顶部：48px；
字体大小：16px；
边界：无；
}
#sub2{
边界半径：6px；
宽度：120px；
高度：35px；
文本转换：大写；
显示：块；
边缘顶部：48px；
字体大小：16px；
边界：无；
}
标签{
位置：相对位置；
}
法兰西{
位置：绝对位置；
底部：0；
右：0；
转换：翻译（-50%，65%）；
不透明度：0；
过渡：不透明度.5s，颜色.5s；
}
[数据有效].fa{
不透明度：1；
颜色：#00594C；
}
[data valid=“valid”].fa{
颜色：#00594C；
}
[data valid=“error”].fa{
颜色：#AB0000；
}
.错误{
显示：无；
颜色：#AB0000；
字体大小：.7em；
位置：绝对位置；
左：10px；
排名：0；
转化：translateY（150%）；
字体大小：12px；
边缘顶部：2倍；
}
[数据有效=“错误”]。错误{
显示：块；
}
输入#sub2:未（[禁用]）{
背景色：#fff；
颜色：#00AB8E；
}
输入#子：未（[禁用]）{
背景色：#fff；
颜色：#F68D2E；；
}
#谢谢{显示：无；}
#谢谢你，成功{
显示：块；
文本对齐：居中；
}
#细分页面输入：焦点{
背景色：#fff！重要；；
}
#细分页面文本区域：焦点{
背景色：#fff！重要；；
}
#细分页面输入[type=“text”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
}
#标签注释{
边缘顶部：8px；
}
@介质（最大宽度：656px）{
标签{
宽度：98%；
高度：70像素；
}
法兰西{
转换：翻译（-50%，-45%）；
}
}
@介质（最小宽度：656px）{
.集装箱{
弯曲方向：行；
柔性包装：包装；
自我校准：灵活启动；
}
标签{
边缘底部：20px；
}
}
功能电话号码（电话）{
var phoneno=/^\d{9}|\d{10}|\d{11}$/；
返回电话号码测试（电话）；
}
$（'input[type=“tel”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#phone'））{
if（电话号码（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
}否则{
$label.attr（'data-valid'，'error'）；
log（“这是有效的”）
}
}否则{
$label.attr（'data-valid'，'valid'）；
log（“这是有效的”）
}
}否则{
$label.removeAttr（'data-valid'）；
log（“这是有效的”）
}
});
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}
$（'input[type=“text”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#email'））{
if（validateEmail（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
}否则{
$label.attr（'dat
    <form class="container"
        action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
        method="POST">
        <label>First Name <input id="first_name" maxlength="40"
            name="first_name" size="20" type="text" onkeyup="test()" required><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>Last Name <input id="last_name" maxlength="80"
            name="last_name" size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>Email <span class="error">Please enter a valid
                email address</span> <input id="email" maxlength="80" name="email" size="20"
            type="text" onkeyup="test()"><i class="fa fa-times-circle-o"
            aria-hidden="true"></i>
        </label> <label>Phone <span class="error">Please enter a valid
                phone number</span> <input id="phone" maxlength="80" name="phone" size="20"
            type="tel" onkeyup="test()"><i class="fa fa-check-circle"
            aria-hidden="true"></i>
        </label> <label>City <input id="city" name="city" maxlength="40"
            size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>State/Province <input id="state" maxlength="20"
            name="state" size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label id="co">Company <input id="company" name="company"
            type="text" onkeyup="test()"><i class="fa fa-check-circle"
            aria-hidden="true"></i>
        </label> <label>Comments <textarea id="comments" name="" id=""
                cols="30" rows="10" onkeyup="test()"></textarea> <input id="sub"
            type="submit" disabled="disabled" />
        </label>

        <div>
            <select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN"
                title="Product Interest">
                <option value="">--None--</option>
                <option selected="selected" value="Visiant">Visiant</option>
                <option value="Tessellate">Tessellate</option>
            </select><br> <select hidden="true" id="lead_source" name="lead_source">
                <option value="">--None--</option>
                <option value="Internal">Internal</option>
                <option value="Trade Show">Trade Show</option>
                <option selected="selected" value="Website">Website</option>
                <option value="Direct Marketing">Direct Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="Other">Other</option>
            </select><br>
        </div>
    </form>

    body {
      color: #fff;
      background-color: #30bda6;
      text-align: center;
    }

    form {
      color: #fff;
      background-color: #30bda6;
      text-align: center;
      font-family: Lato;
    }

    * {
      box-sizing: border-box;
    }

    .form-title {
      font-size: 38px;
      color: #fff;
      font-family: "Lato";
      letter-spacing: 70px;
    }

    input {
      font-size: 15px;
      height: 48px;
      margin-top: 8px;
    }

    input[type="tel"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
      font-size: 15px;
      height: 48px;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
      font-size: 15px;
    }

    input:focus {
      background-color: #fff;
    }


    input[type="text"]:focus {
      background-color: #fff;
    }

    input[type="text"]:visited {
      background-color: #fff;
    }

    input[type="tel"]:focus {
      background-color: #fff;
    }

    input[type="tel"]:visited {
      background-color: #fff;
    }

    .container {
      display: flex;
      flex-direction: column;
      padding: 5px 0;
    }

    textarea {
      width: 100%;
      background-color: #30bda6;
      border: 1px solid #fff;
    }

    textarea:focus {
      background-color: #fff;
    }

    #co {
      flex-basis: 100%;
      max-width: 100%;
    }

    label:nth-last-child(-n+2) {
      flex-basis: 100%;
      max-width: 100%;
    }

    select,
    label {
      height: 50px;
      width: 48%;
      margin: 2% 1%;
      text-align: left;
      font-family: "Lato";
      font-size: 15px;
    }

    #sub {
      border-radius: 6px;
      width: 120px;
      height: 35px;
      text-transform: uppercase;
      display: block;
      margin-top: 48px;
      font-size: 16px;
      border: none;
    }

    #sub2 {
      border-radius: 6px;
      width: 120px;
      height: 35px;
      text-transform: uppercase;
      display: block;
      margin-top: 48px;
      font-size: 16px;
      border: none;
    }


    label {
      position: relative;
    }

    .fa {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(-50%, 65%);
      opacity: 0;
      transition: opacity .5s, color .5s;
    }

    [data-valid] .fa {
      opacity: 1;
      color: #00594C;
    }

    [data-valid="valid"] .fa {
      color: #00594C;
    }

    [data-valid="error"] .fa {
      color: #AB0000;
    }

    .error {
      display: none;
      color: #AB0000;
      font-size: .7em;
      position: absolute;
      left: 10px;
      top: 0;
      transform: translateY(150%);
      font-size: 12px;
      margin-top: 2px;
    }

    [data-valid="error"] .error {
      display: block;
    }

    input#sub2:not([disabled]){
        background-color: #fff;
        color:  #00AB8E;
    }

    input#sub:not([disabled]){
        background-color: #fff;
        color: #F68D2E;;
    }


    #thankyou { display:none;}

    #thankyou.success { 
        display: block;
        text-align: center;
    }

    #tessellate-page input:focus {
        background-color: #fff !important;;
    }

    #tessellate-page textarea:focus {
        background-color: #fff !important;;
    }

    #tessellate-page input[type="text"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
    }

    #comments_label {
        margin-top: 8px;
    }


    @media (max-width: 656px) {
      label {
        width: 98%;
        height: 70px;
      }

       .fa {
        transform: translate(-50%, -45%);
      }
    }

    @media (min-width: 656px) {
      .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-self: flex-start;
      }

      label {
        margin-bottom: 20px;

      }


    }

    function phoneNumber(phone)  {  
      var phoneno = /^\d{9}|\d{10}|\d{11}$/;  
      return phoneno.test(phone);
    }

    $('input[type="tel"]').on('keyup', function() {
      var $label = $(this).closest('label');
      if ($(this).val().trim() != '') {
        if ($(this).is('#phone')) {
          if (phoneNumber($(this).val())) {
            $label.attr('data-valid', 'valid');
          } else {
            $label.attr('data-valid', 'error');
            console.log("this works")
          }
        } else {
          $label.attr('data-valid', 'valid');
          console.log("this works")
        }
      } else {
        $label.removeAttr('data-valid');
        console.log("this works")

      }
    });


    function validateEmail(email) {
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

    $('input[type="text"]').on('keyup', function() {
      var $label = $(this).closest('label');
      if ($(this).val().trim() != '') {
        if ($(this).is('#email')) {
          if (validateEmail($(this).val())) {
            $label.attr('data-valid', 'valid');
          } else {
            $label.attr('data-valid', 'error');
            console.log("this works")
          }
        } else {
          $label.attr('data-valid', 'valid');
          console.log("this works")
        }
      } else {
        $label.removeAttr('data-valid');
        console.log("this works")

      }
    });


    test = function() {
      if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
        $("#sub").removeAttr("disabled");
      }
    }

select, label{
  height: auto;
}

label{
    margin-bottom: 20px;
}

label{
    margin-bottom: 48px;
}