5

I have two material buttons in my angular application right next to each other. I want to add a little bit of padding between them. But when I add add padding-right to the left button, I end up going from this:

|  button  ||  button  |

To this:

|  button         ||  button  |

But what I want is this:

|  button  |       |  button  |
ccpizza
  • 28,968
  • 18
  • 162
  • 169
kroe761
  • 3,296
  • 9
  • 52
  • 81
  • 4
    To add space between two button, add `margin-right: 10px` to first button. But this is only good if you have two button adjacent to each other. Please use this style with a custom CSS class. – nitin9nair Jun 25 '19 at 13:51
  • Margin is the space beyond an element's border and other elements while padding is the space between the element's border and it's in inner content. https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding – Gilles Jun 25 '19 at 15:09

3 Answers3

6

As @nitin9nair comment, what you need is the margin property, in a style attribute or in a CSS class definition:

<button style="margin-right:20px">Button 1</button> <button>Button 2</button>

If you use flex-layout, you can use the fxLayoutGap directive too.

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px grid"><button>Button 1</button> <button>Button 2</button>
More info: [https://github.com/angular/flex-layout/wiki/fxLayoutGap-API][1]
pedrozopayares
  • 2,856
  • 1
  • 13
  • 14
2

You could also write a css selector, which adds margin to siblings. So this will not apply to the first button, but all following buttons. In this case the mat-raised-button. Just adjust the css selector for the elements where you want to have spacing.

.mat-raised-button ~ .mat-raised-button {
  margin-left: 10px;
}
Akora
  • 756
  • 7
  • 22
-1

**

There are many ways to solve this. please see below some of my observations. - you can add &nbsp ; (non-breaking space) in between both the material buttons.

  • < button type="button">Button 1< /button> &nbsp ; &nbsp ; < button type="button">Button 2< /button>

  • second way is you can add the style margin-right:10px to button 1. don't give padding as your given instruction you are giving the padding (padding is for inside spacing to border.) you have to give the margin-right spacing which is spacing beyond the borders.

**

Dheeraj Kumar
  • 146
  • 1
  • 10