what's the easiest way to put space between 2 side-by-side buttons in asp.net
HtmlCssButtonSpaceHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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>
Solution 3 - Html
#btnClear{margin-left:100px;}
Or add a class to the buttons and have:
.yourClass{margin-left:100px;}
This achieves this - http://jsfiddle.net/QU93w/
Solution 4 - Html
<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"/>
Solution 5 - Html
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>
Solution 6 - Html
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.
Solution 7 - Html
I used
and it is working fine. You could try it.
You do not need to use the quotation marks
Solution 8 - Html
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>
Solution 9 - Html
Can you just just some
?
<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>
Solution 10 - Html
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>
Solution 11 - Html
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
Solution 12 - Html
you can use btnSubmit::before { margin-left: 20px; }