what's the easiest way to put space between 2 side-by-side buttons in asp.net
create a divider class as follows:
.divider{
width:5px;
height:auto;
display:inline-block;
}
Then attach this to a div between the two buttons
<div style="text-align: center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
<div class="divider"/>
<asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>
This is the best way as it avoids the box model, which can be a pain on older browsers, and doesn't add any extra characters that would be picked up by a screen reader, so it is better for readability.
It's good to have a number of these types of divs for certain scenarios (my most used one is vert5spacer, similar to this but puts a block div with height 5 and width auto for spacing out items in a form etc.
Add a space
between them (or more depending on your preference)
<div style="text-align: center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>
#btnClear{margin-left:100px;}
Or add a class to the buttons and have:
.yourClass{margin-left:100px;}
This achieves this - http://jsfiddle.net/QU93w/
<style>
.Button
{
margin:5px;
}
</style>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" CssClass="Button"/>
Old post, but I'd say the cleanest approach would be to add a class to the surrounding div and a button class on each button so your CSS rule becomes useful for more use cases:
/* Added to highlight spacing */
.is-grouped {
display: inline-block;
background-color: yellow;
}
.is-grouped > .button:not(:last-child) {
margin-right: 10px;
}
Spacing shown in yellow<br><br>
<div class='is-grouped'>
<button class='button'>Save</button>
<button class='button'>Save As...</button>
<button class='button'>Delete</button>
</div>