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>

yes, i would just style up a span class (padding-right: 4px; for example) and apply it to the button(s) as a class. maybe i'm missing something here?? — jim tollan, Feb 25 '11 at 16:29

Michael Allen · Answer 1 · 2011-02-25T16:53:40.180

95

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.

edited Feb 25 '11 at 16:53

answered Feb 25 '11 at 16:35

Michael Allen

5,712
3
38
63

3

This looks like a very nice solution. Thanks! I had no idea I can learn so much with a simple question like this. :)) – user570185 Feb 25 '11 at 16:51
Worth noting: it appears if you have any kind of float going on, the divider will collapse to zero width. If you set min-height:1px that takes care of it, (or toss in an in the content although I'm sure that's less kosher) – Josh Sutterfield Oct 27 '15 at 15:57
In my case this worked: `.divider{margin: 0.25rem; display: inline;}` – Victoria Stuart Apr 01 '22 at 20:12

score 44 · Answer 2 · answered Feb 25 '11 at 16:28

44

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" />
        &nbsp;
        <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
    </div>

answered Feb 25 '11 at 16:28

QuinnG

6,346
2
39
47

3

Like Alex Thomas said in nilma answer. USE CSS. – Rushino Jul 17 '12 at 19:07
3

It's typically recommended not to use HTML to achieve design goals like this. – Derek W Apr 19 '13 at 11:55
@DerekW could you justify, it does seem to be a simple solution. Is there any optimization concerns or any other? – coder kemp Feb 15 '23 at 21:21
@coderkemp: It is generally considered a historical artifact of HTML and CSS is the preferred method these days to address this type of issue. As with many things, there are an endless number ways to do them, but there exists generally accepted best practices based on separate of concerns, code readability, etc. – Derek W Apr 10 '23 at 15:18

score 31 · Answer 3 · answered Feb 25 '11 at 16:31

31

#btnClear{margin-left:100px;}

Or add a class to the buttons and have:

.yourClass{margin-left:100px;}

This achieves this - http://jsfiddle.net/QU93w/

answered Feb 25 '11 at 16:31

Alex

8,875
2
27
44

2

Yes! Easier and more reliable than the first two solutions. – Daniel F. Thornton Apr 10 '14 at 23:18

score 17 · Answer 4 · answered Feb 25 '11 at 16:30

17

    <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"/>

answered Feb 25 '11 at 16:30

WraithNath

17,658
10
55
82

score 12 · Answer 5 · answered Aug 09 '17 at 16:45

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>

Mahesh Velaga · Answer 6 · 2011-02-25T16:44:39.273

10

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.

edited Feb 25 '11 at 16:44

answered Feb 25 '11 at 16:29

Mahesh Velaga

21,633
5
37
59

score 5 · Answer 7 · answered Jan 08 '16 at 10:50

5

I used   and it is working fine. You could try it. You do not need to use the quotation marks

answered Jan 08 '16 at 10:50

azibit

59
1
2

2

There's [already an answer](http://stackoverflow.com/a/5119776/2083613) suggesting this. – dakab Jan 08 '16 at 11:09

score 5 · Answer 8 · answered Aug 08 '19 at 17:36

If you are using bootstrap, add ml-3 to your second button:

 <div class="row justify-content-center mt-5">
        <button class="btn btn-secondary" type="button">Button1</button>
        <button class="btn btn-secondary ml-3" type="button">Button2</button>
 </div>

score 4 · Answer 9 · answered Feb 14 '17 at 13:47

There is another way of doing so:

<span style="width: 10px"></span>

You can adjust the amount of space using the width property.

Your code would be:

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <span style="width: 10px"></span>
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

score 3 · Answer 10 · answered Feb 25 '11 at 16:27

3

Can you just just some   ?

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    &nbsp;&nbsp;
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

answered Feb 25 '11 at 16:27

ihamlin

180
3

10

Don't do this, please use CSS. – Alex Feb 25 '11 at 16:31
For screen readers this is a bad idea as the will be considered a character. Use CSS instead – Michael Allen Feb 25 '11 at 16:36
yes, i was certain that both these answers with the &nbsp would get down-voted. surprise-surprise.. – jim tollan Feb 25 '11 at 16:37
I did not know about the screen readers, that's very interesting thanks. – ihamlin Feb 25 '11 at 17:00

score 2 · Answer 11 · answered Feb 28 '19 at 15:47

If you want the style to apply globally you could use the adjacent sibling combinator from css.

.my-button-style + .my-button-style {
  margin-left: 40px;
}

/* general button style */
.my-button-style {
  height: 100px;
  width: 150px;
}

Here is a fiddle: https://jsfiddle.net/caeLosby/10/

It is similar to some of the existing answers but it does not set the margin on the first button. For example in the case

<button id="btn1" class="my-button-style"/>
<button id="btn2" class="my-button-style"/>

only btn2 will get the margin.

For further information see https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

score 1 · Answer 12 · answered Dec 26 '20 at 14:36

1

you can use btnSubmit::before { margin-left: 20px; }

answered Dec 26 '20 at 14:36

Hany elnaggar

11
1

score 0 · Answer 13 · answered Jun 06 '22 at 20:02

0

With the bootstrap CSS, we have a 'btn-toolbar' class.

<div class="btn-toolbar">
    <button class="btn">Start</button>
    <button class="btn">Stop</button>
</div>

https://getbootstrap.com/docs/4.0/components/button-group/#button-toolbar

answered Jun 06 '22 at 20:02

Castello

54
1
5

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

13 Answers13