CODEWITHSUNDEEP
cssangular-material
kroe761
kroe761

Reputation: 3534

Spacing between Material Buttons

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  |

Upvotes: 5

Views: 18523

Answers (3)

Akora
Akora

Reputation: 825

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.

.mdc-button ~ .mdc-button {
  margin-left: 10px;
}

Upvotes: 3

pedrozopayares
pedrozopayares

Reputation: 2986

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]

Upvotes: 6

Dheeraj Kumar
Dheeraj Kumar

Reputation: 146

**

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.

**

Upvotes: -1

Related Questions