How to remove space bottom mat-form-field

Question

I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.

Answer 1

You can add this in your css

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field.

Without using ::ng-deep( for Angular 8 )

Turn off encapsulation of your component inside which you change the padding.

You can do this by

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components. Let's wrap this with with my-form-field class for now

<mat-form-field class="my-form-field">
  <input matInput placeholder="Input">
</mat-form-field>

.my-form-field .mat-form-field-wrapper {
      margin-bottom: -1.25em;
}

You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.

Answer 2

Try the following:

<mat-form-field style="margin-bottom: -1.25em">

(You can follow the discussion about this extra bottom space here: https://github.com/angular/components/issues/7975)

Answer 3

In angular 9, I was able to remove the gaps only by adding the following into the component.scss (the other answers didn't worked in my case):

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

Also, I'm using appearance="outline", for other appearances, it will probably be necessary to change other css classes and properties, since it may have other elements.