空的空間從哪里來？

Question

我沒有寫表單，但是CSS只有8行+引導表單控件，然后是javascript的一些類，但是我不知道為什么占位符文本位或實際上是其父div高度變為60px左右，頂部和底部只有15px的空白，然后占位符文本的空白。 我已經進行了表單控制，沒有高度樣式，所以我無法弄清楚。 如果您可以看看，那就太好了。

HTTP：//danceforovariancancer.com.au#perform

這是聯系表單html，它是CSS，但是我建議檢查元素，因為據我所知，CSS中沒有答案：o

<section id="perform">
<div class="container-fluid apply">
   <div class="text-center row">
      <h1>Want to perform? Sign up here</h1>
   </div>
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
         <form name="sentMessage" id="contactForm" novalidate>
            <div class="col-lg-4">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Name</label>
                     <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Email</label>
                     <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Phone</label>
                     <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <div class="col-lg-8">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Message</label>
                     <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="row">
               <div class="form-group col-xs-12">
                  <button type="submit" class="btn btn-success btn-lg">Send</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>

和CSS

.apply {
    background-color: #0094ab;
}
.form-control {
    color: #fff !important;
}
.floating-label-form-group {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
    /*     padding-bottom: .5em; */
    border-bottom: 1px solid #eee;/*     color: #0094ab; */
}
.floating-label-form-group input,  .floating-label-form-group textarea {
    z-index: 1;
    color: #fff;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: none!important;
    resize: none;
}
.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease;/*     color: #fff; */
}
.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}
.floating-label-form-group-with-focus label {
    color: #80bc18;
}
form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee;
}
 .form-control::-moz-placeholder {
 color: #999;
 opacity: 1;
}
 .form-control:-ms-input-placeholder {
 color: #999;
}
 .form-control::-webkit-input-placeholder {
 color: #999;
/*   font-size: 12px; */
}

Answer 1

您有隱藏的標簽（ opacity:0 ）占用了空間。 實際上， Opacity:0隱藏元素（此處為標簽），但保留空間。 您可以改用display:none完全隱藏元素。 我希望這有幫助。

Answer 2

正如其他人所說，問題是由隱藏標簽引起的。 如果您正在尋找快速修復，這是我會做的：

在mystyles.css中為.form-control添加上邊距。

.form-control {
    margin-top: -10px;
}

Answer 3

應用以下更改

label {
  opacity: 1 !important;
  top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
  background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
  border: 0 none;
  border-radius: 3px;
  box-shadow: none !important;
  color: #fff;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 0;
  position: relative;
  resize: none;
  z-index: 1;
}
.form-control {
  color: #fff !important;
  line-height: 1.5;
}