title: How to get rid of unnecessary ng-container margin on the page?
body: <p>I'm controlling two mat tabs with statement.Both mat-tab elements contain card-list and controlled with statement in ng-container.Interestingly on the first tab,card has little margin from top when I hover over the mouse says ng-star-inserted.Opposite of this logic also applied for second mat-tab card element and it has margin from bottom.When I remove <code>&lt;ng-container *ngIf="!appointment.passed"&gt;</code> this line.I can get rid of unnecessary margin but obviously logic doesn't work.How can I get rid of this unnecessary margin without losing the logic which controlls have passed or not.</p>
  
  <p><strong>Margin on top (Active appointments tab)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/DHszE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DHszE.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;ng-container *ngIf="!appointment.passed"&gt;
  </code></pre>
  
  <p><strong>Margin on bottom (Past appointments tab)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/17CK9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17CK9.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;ng-container *ngIf="appointment.passed"&gt;
  </code></pre>
  
  <p><strong>Appointments array below(in the end of each object has passed value true or not.Thats how I determine them passed or not)</strong></p>
  
  <pre><code>0: {id: 36, appointmentDate: "2019-12-27T10:28:15", doctorName: "Conner Reyes", departmentName: "Urology", hospitalName: "Genopkins Hospital", …}
  1: {id: 57, appointmentDate: "2020-01-03T08:29:25", doctorName: "Ayesha Brewer", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
  2: {id: 40, appointmentDate: "2020-01-11T17:23:39", doctorName: "Shelbie Jenkins", departmentName: "Gynecologic Oncology", hospitalName: "Genopkins Hospital", …}
  3: {id: 58, appointmentDate: "2020-01-15T15:45:19", doctorName: "Kirsty Armstrong", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
  4: {id: 93, appointmentDate: "2020-01-16T17:26:27", doctorName: "Claire Burton", departmentName: "Eye Center", hospitalName: "Mediclinic Hospital", …}
  </code></pre>