HTML|CSS: Space between input buttons

The line feed between the two <input>s creates a space between them on the page. You have to remove the line feed, or use this trick :

<input id="NeedBtn" class="PostBtn" type="button" /><!--
--><input id="ProvBtn" class="PostBtn" type="button" />

Surprised no one mentioned this method yet:

The problem is the white-space between the two buttons is being rendered. Any white-space (line breaks, tabs, spaces) between the buttons will be rendered as a single space by the browser. To fix this, you can set the font-size to 0 on a parent element.

I've added DIV#button-container around the buttons and a style for it showing the font-size trick.

Note: I also had to change the positioning on the button background graphic you linked since it had some extra pixel space around it. Maybe this was part of the problem, maybe not.

Here's a link to the fiddle: http://jsfiddle.net/dHhnB/ and the code:

<style>
#button-container
{
   font-size:0;    
}
.PostBtn
{
   background: url(http://img22.imageshack.us/img22/5066/capturebtn.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: -4px 0;
}
#ProvBtn
{
   background-position: -59px 0px;
}
</style>
<div id="button-container">
    <input id="NeedBtn" class="PostBtn" type="button" />
    <input id="ProvBtn" class="PostBtn" type="button" />
</div>

As others have pointed out you can use floats to counter act the whitespace between elements

<input id="NeedBtn" class="PostBtn floated" type="button" />
<input id="ProvBtn" class="PostBtn floated" type="button" />

.floated {
   float:left;
}

.floated {
  float:left;
}

<input id="NeedBtn" class="PostBtn floated" value="Next" type="button" />
<input id="ProvBtn" class="PostBtn floated" value="Prev" type="button" />

As well as the various hacks for inline-block:

Using 0px font-size in parent and resetting the font-size in the child elements.

    <div class="parent">
        <div class="child">Some Text</div>
        <div class="child">Some More Text</div>
    </div>

    .parent {
       font-size:0px;
     }

     .parent > * {
       display:inline-block;
       font-size:14px;
     }

Putting all the elements next to each other, ie: <div></div><div></div>
Putting the closing tag on the next line and next to the next element, ie:
```
<div>
</div><div>
</div>
```
Putting the closing bracket of the previous element on the next line and next to the next element, ie:
```
<div></div
><div></div>
```
Or using html comments
```
<div></div><div></div>
```

And as stated by others this isn't an optimal solution.

With modern browsers Flexbox styles can now be used

<div class="flex">
    <input id="NeedBtn" class="PostBtn flex-child" type="button" />
    <input id="ProvBtn" class="PostBtn flex-child" type="button" />
</div>

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex:  0 1 auto;
}

<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

A guide for flex can be found here, and support list here

HTML|CSS: Space between input buttons

Tags:

Html

Css

Related

Recent Posts