66

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>
2
  • 1
    Have you tried margin on the buttons themselves?
    – Chris
    Feb 25, 2011 at 16:26
  • 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, 2011 at 16:29

13 Answers 13

96

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.

3
  • 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, 2011 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 &nbsp; in the content although I'm sure that's less kosher) Oct 27, 2015 at 15:57
  • In my case this worked: .divider{margin: 0.25rem; display: inline;} Apr 1, 2022 at 20:12
45

Add a space &nbsp; 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>
4
  • 3
    Like Alex Thomas said in nilma answer. USE CSS.
    – Rushino
    Jul 17, 2012 at 19:07
  • 3
    It's typically recommended not to use HTML to achieve design goals like this.
    – Derek W
    Apr 19, 2013 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, 2023 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, 2023 at 15:18
32
#btnClear{margin-left:100px;}

Or add a class to the buttons and have:

.yourClass{margin-left:100px;}

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

1
  • 2
    Yes! Easier and more reliable than the first two solutions. Apr 10, 2014 at 23:18
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"/>
13

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>

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.

5

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

1
5

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>
4

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>
3

Can you just just some &nbsp; ?

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

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

1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.