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     lt div style  text-align  center  gt        lt asp Button ID  btnSubmit  runat  server  Text  Submit  Width  89px  OnClick  btnSubmit Click    gt       lt asp Button ID  btnClear  runat  server  Text  Clear  Width  89px  OnClick  btnClear Click    gt   lt  div gt

User · Answer

btnClear margin-left 100px     Or add a class to the buttons and have    yourClass margin-left 100px     This achieves this - http   jsfiddle net QU93w

User · Answer

Can you just just some  amp nbsp      lt div style  text-align  center  gt        lt asp Button ID  btnSubmit  runat  server  Text  Submit  Width  89px  OnClick  btnSubmit Click    gt       amp nbsp  amp nbsp       lt asp Button ID  btnClear  runat  server  Text  Clear  Width  89px  OnClick  btnClear Click    gt   lt  div gt

User · Answer

you can use btnSubmit  before   margin-left  20px

User · Answer

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

User · Answer

If you are using bootstrap  add ml-3 to your second button     lt div class  row justify-content-center mt-5  gt           lt button class  btn btn-secondary  type  button  gt Button1 lt  button gt           lt button class  btn btn-secondary ml-3  type  button  gt Button2 lt  button gt    lt  div gt

User · Answer

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    x000D   x000D     Added to highlight spacing    x000D   is-grouped      x000D      display  inline-block  x000D      background-color  yellow  x000D    x000D   x000D   is-grouped  gt   button not  last-child    x000D      margin-right  10px  x000D    x000D  Spacing shown in yellow lt br gt  lt br gt  x000D   x000D   lt div class  is-grouped  gt  x000D       lt button class  button  gt Save lt  button gt  x000D       lt button class  button  gt Save As    lt  button gt  x000D       lt button class  button  gt Delete lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt style gt       Button               margin 5px             lt  style gt     lt asp Button ID  Button1  runat  server  Text  Button  CssClass  Button    gt    lt asp Button ID  Button2  runat  server  Text  Button  CssClass  Button   gt

User · Answer

There is another way of doing so    lt span style  width  10px  gt  lt  span gt   You can adjust the amount of space using the width property   Your code would be    lt div style  text-align  center  gt        lt asp Button ID  btnSubmit  runat  server  Text  Submit  Width  89px  OnClick  btnSubmit Click    gt       lt span style  width  10px  gt  lt  span gt       lt asp Button ID  btnClear  runat  server  Text  Clear  Width  89px  OnClick  btnClear Click    gt   lt  div gt

User · Answer

Add a space  amp nbsp  between them  or more depending on your preference          lt div style  text-align  center  gt                    lt asp Button ID  btnSubmit  runat  server  Text  Submit  Width  89px  OnClick  btnSubmit Click    gt           amp nbsp           lt asp Button ID  btnClear  runat  server  Text  Clear  Width  89px  OnClick  btnClear Click    gt       lt  div gt

User · Answer

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    lt button id  btn1  class  my-button-style   gt   lt button id  btn2  class  my-button-style   gt    only btn2 will get the margin   For further information see https   developer mozilla org en-US docs Web CSS Adjacent sibling combinator

User · Answer

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

User · Answer

create a divider class as follows    divider      width 5px      height auto      display inline-block      Then attach this to a div between the two buttons   lt div style  text-align  center  gt        lt asp Button ID  btnSubmit  runat  server  Text  Submit  Width  89px  OnClick  btnSubmit Click    gt       lt div class  divider   gt       lt asp Button ID  btnClear  runat  server  Text  Clear  Width  89px  OnClick  btnClear Click    gt   lt  div gt    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

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

Examples related to html

Examples related to css

Examples related to button

Examples related to space