Why is there spacing between these buttons still?

Question

I want to display four buttons, inline, without any spacing between them. I have a jsfiddle that shows the current behavior. In short, the following HTML/CSS:

<div>
    <input id="unconfirmedYes" type="button" value="10%" />
    <input id="confirmedYes" type="button" value="98% YES" />
    <input id="confirmedNo" type="button" value="2% NO" />
    <input id="unconfirmedNo" type="button" value="90%" />
</div>

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
}
#unconfirmedYes, #unconfirmedNo {
    width: 10%;
}
#confirmedYes, #confirmedNo {
    width: 40%;
}

will in fact line the buttons up, but there is still spacing between them. How do I get rid of that spacing so they stack up right against each other?

You probably want a reset style sheet. Like this one >> http://meyerweb.com/eric/tools/css/reset/ — Hogan, Aug 03 '13 at 04:10
@Hogan No, the button renderer doing that. There is invisible padding around the button and the operating system renders it that way. What the browser sees as 0 padding may in fact be 5 px. — Cole Tobin, Aug 03 '13 at 04:10

score 7 · Accepted Answer · answered Aug 03 '13 at 04:10

7

The whitespace between the <input/> elements is where the spacing is coming from. If you remove the line breaks and make the tags completely adjacent the space will disappear.

<div>
    <input id="unconfirmedYes" type="button" value="10%"
  /><input id="confirmedYes"   type="button" value="98% YES"
  /><input id="confirmedNo"    type="button" value="2% NO"
  /><input id="unconfirmedNo"  type="button" value="90%" />
</div>

answered Aug 03 '13 at 04:10

John Kugelman

349,597
67
533
578

@John Kugelman Your solution gives the real reason for such behavior, thanks for it. – Kalpesh Patel Aug 03 '13 at 04:17

score 2 · Answer 2 · answered Aug 03 '13 at 04:10

2

Set float:left to button.

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;
}

answered Aug 03 '13 at 04:10

Kalpesh Patel

2,772
2
25
52

score 1 · Answer 3 · edited May 23 '17 at 11:43

1

it is assuming that the there are whitespaces between the buttons. If you set font size to zero, the space will be removed.

div.give-it-a-class{
 font-size: 0;
}

Detail can be found in this question.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 03 '13 at 04:12

Mohayemin

3,841
4
25
54

I think this is the best answer, as using float is not cross browser and removing the line breaks between button could be tricky because another programmer may want to format code to make it more readable and all the efforts will be gone... – Sara Nikta Yousefi Aug 31 '15 at 06:49

shakthydoss · Answer 4 · 2013-08-03T04:22:58.207

1

Simply use html comments to remove space between html tags.

<div>
    <input id="unconfirmedYes" type="button" value="10><!--
   --><input id="confirmedYes" type="button" value="98% YES" /><!--
   --><input id="confirmedNo" type="button" value="2% NO" /><!--
   --><input id="unconfirmedNo" type="button" value="90%" />
</div>

edited Aug 03 '13 at 04:22

answered Aug 03 '13 at 04:13

shakthydoss

2,551
6
27
36

Why is there spacing between these buttons still?

4 Answers4