CODEWITHSUNDEEP
htmlcss
Mike Perrenoud
Mike Perrenoud

Reputation: 67898

Why is there spacing between these buttons still?

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?

Upvotes: 2

Views: 104

Answers (4)

shakthydoss
shakthydoss

Reputation: 2631

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>

Upvotes: 1

Mohayemin
Mohayemin

Reputation: 3870

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.

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Set float:left to button.

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

Upvotes: 2

John Kugelman
John Kugelman

Reputation: 361615

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>

Upvotes: 7

Related Questions