如何設置CSS中每個元素之間的邊距？

Question

我試圖做到這一點在CSS：

各元素之間的差額是10px的 textarea的高度爲100像素，寬150像素

這是我的一些HTML代碼，以供參考：

main form label { 
 
    margin: 10px; 
 
} 
 

 
textarea { 
 
    height: 100px; 
 
    width: 150px; 
 
}

<main> 
 
    <h2>Contact Us</h2> 
 
    <form action="#" method="post"> 
 
     <label> 
 
      First name: 
 
      <input type="text" name="firstname"> 
 
     </label> 
 
     <label> 
 
      Last name: 
 
      <input type="text" name="lastname"> 
 
     </label> 
 
     <label> 
 
      Email: 
 
      <input type="text" name="email"> 
 
     </label> 
 
     <label> 
 
      Select Your State: 
 
      <select> 
 
       <option value="florida">Florida</option> 
 
       <option value="california">California</option> 
 
       <option value="michigan" selected="selected">Michigan</option> 
 
       <option value="new york">New York</option> 
 
       <option value="texas">Texas</option> 
 
      </select> 
 
     </label> 
 
     <label> 
 
      Male 
 
      <input type="radio" name="gender" value="male"> 
 
     </label> 
 
     <label> 
 
      Female 
 
      <input type="radio" name="gender" value="female"> 
 
     </label> 
 
     <label> 
 
      Comment: 
 
      <textarea name="comment" id="comment"></textarea> 
 
     </label> 
 
     <input type='submit' value='Submit' /> 
 

 
    </form> 
 

 
</main>

我不知道爲什麼它不是工作。我之前做過定期保證金。我只是不知道如何使ALL元素之間的利潤。

Answer 1

內聯元素忽略垂直邊界。使用inline-block。

main form label { 
 
    display: inline-block; 
 
    margin: 10px; 
 
} 
 

 
textarea { 
 
    height: 100px; 
 
    width: 150px; 
 
}

<main> 
 
    <h2>Contact Us</h2> 
 
    <form action="#" method="post"> 
 
     <label> 
 
      First name: 
 
      <input type="text" name="firstname"> 
 
     </label> 
 
     <label> 
 
      Last name: 
 
      <input type="text" name="lastname"> 
 
     </label> 
 
     <label> 
 
      Email: 
 
      <input type="text" name="email"> 
 
     </label> 
 
     <label> 
 
      Select Your State: 
 
      <select> 
 
       <option value="florida">Florida</option> 
 
       <option value="california">California</option> 
 
       <option value="michigan" selected="selected">Michigan</option> 
 
       <option value="new york">New York</option> 
 
       <option value="texas">Texas</option> 
 
      </select> 
 
     </label> 
 
     <label> 
 
      Male 
 
      <input type="radio" name="gender" value="male"> 
 
     </label> 
 
     <label> 
 
      Female 
 
      <input type="radio" name="gender" value="female"> 
 
     </label> 
 
     <label> 
 
      Comment: 
 
      <textarea name="comment" id="comment"></textarea> 
 
     </label> 
 
     <input type='submit' value='Submit' /> 
 

 
    </form> 
 

 
</main>

Answer 2

嘗試將標籤設置爲display: block;或display: inline-block;。

main form label { 
    display: block; 
    margin: 10px; 
} 

默認情況下，標籤以內聯方式顯示，因此邊際值不適用於您可能預期的情況。也許這有助於你理解這個問題：http://maxdesign.com.au/articles/inline/