CODEWITHSUNDEEP
css
yarek
yarek

Reputation: 12034

css : how to reduce spaces between input elements

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

Upvotes: 5

Views: 8331

Answers (4)

FelipeAls
FelipeAls

Reputation: 22161

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

Upvotes: 4

James Donnelly
James Donnelly

Reputation: 128781

The white space is caused by the line breaks between each element:

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

To fix this, there are quite a lot of options. With HTML alone you can simply move all the input elements onto one line:

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

Another option would be to use a bit of CSS to remove the font size from the container:

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

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

Upvotes: 1

veelen
veelen

Reputation: 1914

Margin and padding will not work because input is an inline element. You have to make input a inline-block or block element to use padding and margin.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

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

Upvotes: 8

Related Questions