HTMLフォームの整列を変更する

Question

フォームと入力ボックスの間のスペースを増やそうとしています。私は以下の画像と現在のコードを掲載します。スペースを増やすためにどの行のコードを追加する必要があるのだろうか。ありがとう！

また、私のページの中央にiFrameを移動することができますので、どのような方法でもエコーがあります。自動的に均等に表示されます。

enter image description here

<style> 
body {background-color: transparent;} 
body {font-family: avenir;} 
</style> 

<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> 


<form action="https://example.example.com/servlet/servlet.Example?encoding=UTF-8" method="POST"> 


<input type=hidden name="oid" value="00D5E0000000UJe"> 
<input type=hidden name="retURL" value="https://example.com/"> 


<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br> 

<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br> 

Date of Birth:<span class="dateInput dateOnlyInput"><input id="00N5E000000rknN" name="00N5E000000rknN" size="12" type="text" /></span><br><br> 

<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" /><br><br> 

<label for="mobile">Mobile</label><input id="mobile" maxlength="40" name="mobile" size="20" type="text" required=true/><br><br> 

<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" required=true /><br><br> 

Current/Previous School/University:<input id="00N5E000000rwVf" maxlength="100" name="00N5E000000rwVf" size="20" type="text" /><br><br> 

Course you would like to study:<input id="00N5E000000rkdr" maxlength="255" name="00N5E000000rkdr" size="20" type="text"/><br><br> 

<label for="lead_source">Where did you hear about us?</label><select id="lead_source" name="lead_source"><option value="">--None--</option><option value="Ahmed Al-Ajmi">Ahmed Al-Ajmi</option> 
<option value="British Council">British Council</option> 
<option value="Career day">Career day</option> 
<option value="Facebook">Facebook</option> 
<option value="Flier/Poster">Flier/Poster</option> 
<option value="Google">Google</option> 
<option value="Instagram">Instagram</option> 
<option value="Twitter">Twitter</option> 
<option value="University Website_(Please specify)">University Website_(Please specify)</option> 
<option value="Web">Web</option> 
</select><br><br> 

<input type="submit" name="submit"> 

</form> 

Answer 1

まず第一に、あなたが各項目の実際のラベルを使用するため、それが参考になります。多分それがあなたの意図です。あなたは、あなたは、単にこのスタイルを追加することができ、各項目のラベルを使用した場合

は（私が例えば12ピクセルを使用し、もちろん、あなたはあなたのために最高の作品何でも使用することができます）：

label { margin-right: 12px; } 

私は」提供されたコードには含まれていないので、あなたがiFrameに関して何を探しているのか分かりません。

Answer 2

私は質問を誤解していますが、ラベルと入力フォームの間にスペースをたい場合は、単にそれらわたってるしきスペースを入れることもできる。..

ので

<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br> 

になるでしょう

また、ラベルにクラスを割り当てて、余白/余白を追加することもできます。