I'm curious how to add padding/margin (spaces) between the panels. Looking for html/css solution.

any ideas?

accordion-payment-panel {
margin-bottom: 10px!important; // won't work
}

I'm curious how to add padding/margin (spaces) between the panels. Looking for html/css solution.

https://material.angular.io/ponents/expansion/examples

any ideas?

accordion-payment-panel {
margin-bottom: 10px!important; // won't work
}

• javascript
• html
• css
• angular
• angular-material

3 Answers 3

try add this code in css:

.mat-accordion .mat-expansion-panel{
  margin-bottom: 10px;
}

I believe this solves your problem:

.mat-accordion .mat-expansion-panel:not(.mat-expanded),
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
   margin-bottom: 20px;
}

link to code in github

This is the example the material-angular site created and it produces the spacing correctly:

 <mat-accordion class="example-headers-align">
     .....
 </mat-accordion>

and then for the .css:

.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.example-headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

.example-headers-align .mat-form-field + .mat-form-field {
  margin-left: 8px;
}