要素間にスペースを作る方法は？

Question

私は自分のプロジェクトでbootstrap3を使用しています。

私は、このHTML要素があります。ここでは

<form class="form-inline"> 
     <div class="form-group"> 
      <div class="input-group"> 

       <span class="input-group-addon">from-</span> 
       <input id="input1" class="form-control input-sm" type="text/> 

       <!--How can I make here space--> 

       <span id="span2" class="input-group-addon">to-</span 
       <input class="form-control input-sm" type="text" /> 
      </div> 
     </div> 
    </form> 

はPLUNKERを進めています。

私は、フォーム要素内にスパンと入力を持っています。id = input1の要素とid = "span2"のスパンの間にスペースを入れるにはどうすればよいですか？

Answer 1

あなたは次のように、そこに別の要素を追加することができます。問題は、あなたが要素をグループ化する方法とした

#spacer { width: 14px; display:table-cell;} 

Answer 2

のようなスタイルで

<div id="spacer"></div> 

。ただ、codepen

HTMLをここでclass="input-group"

を持っているdiv要素で、あなたのスパンと入力のそれぞれをラップ

<form class="form-inline"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon">from-</span> 
     <input id="input1" class="form-control input-sm" type="text" /> 
    </div> 

     <!--How can I make here space--> 
     <div class="input-group"> 
     <span id="span2" class="input-group-addon">to-</span> 
     <input class="form-control input-sm" type="text" /> 
     </div> 

    </div> 
</form>