css : how to reduce spaces between input elements

Question

I have that

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

I have like 5 pixels space between each input and I want to set it to 1px.

I tried with margin and padding with no sucess: any clue ?

reagrdfs

Answer 1

It's because of the white-space, either you can just take out all the white space between the tags, or simply use font-size: 0; on the parent element.

Demo (Removing white space between the elements)

Demo (Using font-size: 0; on the parent/wrapper element)

---

Note: You can also use margin-left: -4px; but I wouldn't recommend to use this as if the parent element has a font-size set to 200%, it will again create a white space - Demo

Answer 2

This is due to whitespace in your HTML code. There are many CSS tricks but the only CERTAIN way to remove whitespace in a displayed page is to... remove it from HTML.

With an HTML comment (and a comment for yourself in 2 months or colleagues or client on why there's a comment: "no whitespace")

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

With list items, you can also put closing tag on next line but that's useless for inputs :)

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

You can also close element on next line I believe:

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

I'm so accustomed to perfect indentation that I only use the first method...