CODEWITHSUNDEEP
htmlcssbuttonspace
user570185
user570185

Reputation: 683

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

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>

Upvotes: 68

Views: 407432

Answers (13)

Castello
Castello

Reputation: 52

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

Upvotes: 0

Hany elnaggar
Hany elnaggar

Reputation: 11

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

Upvotes: 1

Manish Jain
Manish Jain

Reputation: 9649

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>

Upvotes: 5

bartgeier
bartgeier

Reputation: 271

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

Upvotes: 3

prograhammer
prograhammer

Reputation: 20590

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>

Upvotes: 13

Saket Mehta
Saket Mehta

Reputation: 2508

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>

Upvotes: 4

azibit
azibit

Reputation: 59

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

Upvotes: 5

Michael Allen
Michael Allen

Reputation: 5828

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.

Upvotes: 96

Mahesh Velaga
Mahesh Velaga

Reputation: 21991

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.

Upvotes: 10

Alex
Alex

Reputation: 9031

#btnClear{margin-left:100px;}

Or add a class to the buttons and have:

.yourClass{margin-left:100px;}

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

Upvotes: 32

WraithNath
WraithNath

Reputation: 18013

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

Upvotes: 17

QuinnG
QuinnG

Reputation: 6424

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>

Upvotes: 45

ihamlin
ihamlin

Reputation: 180

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>

Upvotes: 3

Related Questions