what's the easiest way to put space between 2 side-by-side buttons in asp.net
Question
I have 2 buttons side by side, and I would like to have some inbetween them.
Following code will have 2 buttons right next to each other. I have tried margin for the div, and just couldn't get some nice space between the two.
<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>
Popular Answer
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.
Read more... Read less...
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"/>
Try putting the following class on your second button
.div-button
{
margin-left: 20px;
}
Edit:
If you want your first button to be spaced from the div as well as from the second button, then apply this class to your first button also.
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>