How to Remove Default Padding from a Mat Dialog Container?

By default, a mat dialog container has a padding of 24px on each side. However, in some situations, you might need to get rid of this default padding and change it according to your need.

To remove this default padding from the mat dialog container, first, you have to pass a custom panel class to the mat dialog as a second parameter to the method.

  // Open dialog box
  const dialogRef =,{
    height: '50%',
    panelClass: 'my-panel-class' // <- Add a custom panel class

Now, we will use the above panel class inside our global styles.css file to change the padding of the mat dialog container box.

Open your styles.css file and put the below code there. This will set the mat dialog container’s padding to 0px.

.my-panel-class .mat-dialog-container{
    padding: 0px;

    /* Add more styles */

You can not only change the padding but also add any custom styles to the mat dialog container using the above method. And the interesting thing is that it will only affect those mat dialogs where you are passing that panel class. The other mat dialogs will remain unaffected.

Try adding some more styles to the mat dialog:

.my-panel-class .mat-dialog-container{
    padding: 20px 10px;
    background-color: aquamarine;
    color: rgba(0,0,0,0.8);
    font-style: italic;

    /* Add more styles */


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.