fix(chips): wrong margin on single chip (#4366)

* Fixes single chips having a left margin.
* Reduces the amount of CSS used to set up the chip margins.

Fixes #4359.

Author: crisbeto

src/lib/chips/chips.scss

@@ -6,48 +6,10 @@ $mat-chip-line-height: 16px;
 $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
 .mat-chip-list-wrapper {
-
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
-
-  /*
-   * Only apply the margins to chips
-   */
-  .mat-chip:not(.mat-basic-chip) {
-    margin: 0 $mat-chips-chip-margin 0 $mat-chips-chip-margin;
-
-    // Remove the margin from the first element (in both LTR and RTL)
-    &:first-child {
-      margin: {
-        left: 0;
-        right: $mat-chips-chip-margin;
-      }
-
-      [dir='rtl'] & {
-        margin: {
-          left: $mat-chips-chip-margin;
-          right: 0;
-        }
-      }
-    }
-
-    // Remove the margin from the last element (in both LTR and RTL)
-    &:last-child {
-      margin: {
-        left: $mat-chips-chip-margin;
-        right: 0;
-      }
-
-      [dir='rtl'] & {
-        margin: {
-          left: 0;
-          right: $mat-chips-chip-margin;
-        }
-      }
-    }
-  }
 }
 
 .mat-chip:not(.mat-basic-chip) {
@@ -57,6 +19,15 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
   font-size: $mat-chip-font-size;
   line-height: $mat-chip-line-height;
+
+  // Apply a margin to adjacent sibling chips.
+  & + & {
+    margin: 0 0 0 $mat-chips-chip-margin;
+
+    [dir='rtl'] & {
+      margin: 0 $mat-chips-chip-margin 0 0;
+    }
+  }
 }
 
 .mat-chip-list-stacked .mat-chip-list-wrapper {