5

私は持っています

<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>

各入力の間に 5 ピクセルのスペースがあり、1 ピクセルに設定したいと考えています。

マージンとパディングを試してみましたが、成功しませんでした。手がかりはありますか?

reagrdfs

4

4 に答える 4

8

これは空白のためです。タグ間のすべての空白を削除するか、単にfont-size: 0;親要素で使用できます。

デモ(要素間の空白の削除)

デモ(font-size: 0;親/ラッパー要素で使用)

注: を使用することもできますが、親要素が に設定されmargin-left: -4px;ている場合、これを使用することはお勧めしません。再び空白が作成されます -デモfont-size200%

于 2013-10-22T09:42:36.433 に答える
4

これは、HTML コードの空白が原因です。CSS には多くのトリックがありますが、表示されたページの空白を削除する唯一の確実な方法は、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>

私は完全なインデントに慣れているので、最初の方法しか使用しません...

于 2013-10-22T09:48:08.180 に答える
1

空白は、各要素間の改行によって発生します。

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

これを修正するには、非常に多くのオプションがあります。HTML だけを使用すると、すべてのinput要素を 1 行に移動できます。

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

もう 1 つのオプションは、CSS を少し使用して、コンテナーからフォント サイズを削除することです。

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

input {
    font-size:16px; /* We restore the font size here. */
}
于 2013-10-22T09:44:07.310 に答える
0

入力はインライン要素であるため、マージンとパディングは機能しません。パディングとマージンを使用するには、入力をインラインブロックまたはブロック要素にする必要があります。

于 2013-10-22T09:43:57.833 に答える