CSS：input要素の間

Question

をスペースを削減する方法を私は持っている私は、各入力の間に5つのピクセルのスペースのように持っていると私はそれが1ピクセルに設定したい

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" /> 
     <input class="minimize" value="_" type="button"> 
     <input class="close" value="x" username="_id_" type="button"> 
</div> 

。

私はマージンとパディングなしで成功しました：手がかりはありますか？

reagrdfs

Answer 1

それはあなただけのタグ間のすべての空白を取る、または単に親要素にfont-size: 0;を使用するか、理由は空白のです。

Demo

---

（親/ラッパー要素にfont-size: 0;を使用）

Demoを（要素間の空白を削除）注意：またmargin-left: -4px;を使用することができますが、私は使用することをお勧めしませんこれは親要素のfont-sizeが200%に設定されているかのように、再び空白を作成します。 - Demo

Answer 2

入力はインライン要素なので、余白とパディングは機能しません。パディングとマージンを使用するには、インラインブロックまたはブロック要素を入力する必要があります。ホワイトスペースは、各要素の間に改行によって引き起こされる

Answer 3

：この問題を解決するには

<div> 
    <input /> <!-- White Space --> 
    <input /> <!-- White Space --> 
    <input /> 
</div> 

、quite a lot of optionsがあります。別のオプションは、コンテナからフォントサイズを削除するにはCSSのビットを使用することです

<div> 
    <input /><input /><input /> 
</div> 

：

div { 
    font-size:0; /* The white space has no size, therefore isn't visible. */ 
} 

input { 
    font-size:16px; /* We restore the font size here. */ 
} 

Answer 4

これがあるだけでHTMLを使用すると、1行にすべてinputの要素を簡単に移動することができますあなたのHTMLコードの空白のために。多くのCSSトリックがありますが、唯一CERTAIN表示されたページの空白を削除する方法は、HTMLから削除することです。 HTMLのコメントで

（コメントがあります理由について2ヶ月や同僚やクライアントでの自分自身のためのコメント：「スペースなし」）のリスト項目で

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" /><!-- no whitespace 
     --><input class="minimize" value="_" type="button"><!-- no whitespace 
     --><input class="close" value="x" username="_id_" type="button"> 
</div> 

は、あなたも上のタグを閉じて置くことができます次の行が、それは、入力のために役に立たないのです:)

<ul> 
     <li>aaa 
     </li><li>bbb 
     </li><li>ccc 
     </li><li>lorem ipsum 
     </li><li>dolor sit amet</li> 
</ul> 

あなたはまた、次の行に近い要素が、私は信じることができます。

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" 
     ><input class="minimize" value="_" type="button" 
     ><input class="close" value="x" username="_id_" type="button"> 
</div> 

私は最初のメソッドを使用するだけの字下げに慣れています...