Add paddings between closed angular material accordion panels with css or html

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;
}