what's the easiest way to put space between 2 side-by-side buttons in asp.net

html css button space
user570185 picture user570185 · Feb 25, 2011 · Viewed 327.3k times · Source

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>

Answer

Michael Allen picture Michael Allen · Feb 25, 2011

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.

Related questions

trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More
How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I …

Read More
Embed image in a <button> element

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's …

Read More