how to add a space 17 px between mat-form-field and mat-autocomplete panel of Angular 16?

Question

I am using mat-form-field and mat-autocomplete to implement search function. Now I want to add a space 17px between mat-form-field and mat-autocomplete, namely, I want to add some spaces between the input field and the drop-down-menu, like:

I have tried:

    <form class="search-box-container">
      <!-- Search button -->   
      <button mat-button class="search-button" (click)="loadSuggestionsFromEndpoint2()">
        <mat-icon>search</mat-icon>
      </button>

      <mat-form-field class="autocomplete-container">
        <input
          type="text"
          matInput
          [matAutocomplete]="auto"
          [formControl]="searchControl"
          #searchBox
          id="search-box"
          placeholder="YuSearch"
          (keydown.enter)="closeAutocompleteOnEnter()"/>
      </mat-form-field>

      <!-- Reset button -->
      <button mat-button class="reset-button" (click)="resetSearchBar()">
        <mat-icon>close</mat-icon>
      </button>
  
      <mat-autocomplete #auto="matAutocomplete" class="dropdown-panel"
        (optionSelected)="showDetails($event.option.value)">
        <ng-container *ngFor="let suggestion of searchSuggestionsFromEndpoint1">
          <mat-option [value]="suggestion" *ngIf="suggestion.highlight">
            <ng-container *ngFor="let prop of getObjectKeys(suggestion.highlight)">
              <div class="suggestion-container">
                <div class="row">
                  <div class="highlighted-value">
                    <span [innerHTML]="getHighlightedValue(suggestion.highlight[prop]) | highlight: searchControl.value"></span>
                  </div>
                  <div class="nr-info">
                    NR. {{ suggestion._source.Nr }}
                  </div>
                </div>
              </div>
            </ng-container>
          </mat-option>        
        </ng-container>
  
        <!-- Display the "View All" button if displayViewAllButton is true -->
        <!-- Center the "View all" button -->
        <div class="view-all-container" *ngIf="showViewAllButton">
          <button mat-button class="view-all-button"
            (click)="loadAllSearchSuggestionsFromEndpoint1(); $event.stopPropagation();">
            Zeige alle {{ allSearchSuggestionsFromEndpoint1.length }} Treffer an
          </button>
        </div>
      </mat-autocomplete>
    </form>

.dropdown-panel {
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 0 1px 0 rgba(48, 49, 51, 0.05), 0 8px 16px 0 rgba(48, 49, 51, 0.1);

  overflow-x: hidden; /* Disable horizontal scroll bar */

  margin-top: 17px;
  margin-bottom: 17px; /* Add a margin-bottom of 17px to create the distance */
  margin-left: 0; /* Add margin-left to separate from mat-form-field */
}

::ng-deep .mat-autocomplete-panel {
  position: relative;
  margin-top: 17px;
}

but none of them work, thanks in advance for your help.