CSSの各要素の間にマージンを設定するにはどうすればよいですか？私は、CSSでこれを行うにしようとしています

Question

：

各要素間のマージンが10pxの でテキストエリアの高さは100pxにあり、幅は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/