diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss
index 8a4be141addf..5cf16006d90a 100644
--- a/src/lib/expansion/expansion-panel.scss
+++ b/src/lib/expansion/expansion-panel.scss
@@ -5,6 +5,8 @@
   @include mat-elevation-transition;
   box-sizing: content-box;
   display: block;
+  margin: 0;
+  transition: margin 225ms $mat-fast-out-slow-in-timing-function;
 
   &:not([class*='mat-elevation-z']) {
     @include mat-elevation(2);
@@ -19,6 +21,10 @@
   padding: 0 24px 16px;
 }
 
+.mat-expansion-panel-spacing {
+  margin: 16px 0;
+}
+
 .mat-action-row {
   border-top-style: solid;
   border-top-width: 1px;
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 33cf4babd66d..b36b8f7e9840 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -27,7 +27,7 @@ import {
   transition,
   animate,
 } from '@angular/animations';
-import {MdAccordion, MdAccordionDisplayMode} from './accordion';
+import {MdAccordion} from './accordion';
 import {AccordionItem} from './accordion-item';
 import {UniqueSelectionDispatcher} from '../core';
 import {Subject} from 'rxjs/Subject';
@@ -57,7 +57,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
   host: {
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
-    '[@displayMode]': '_getDisplayMode()',
+    '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   },
   providers: [
     {provide: AccordionItem, useExisting: forwardRef(() => MdExpansionPanel)}
@@ -68,12 +68,6 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
       state('expanded', style({height: '*', visibility: 'visible'})),
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
-    trigger('displayMode', [
-      state('flat, collapsed', style({margin: '0'})),
-      state('default', style({margin: '16px 0'})),
-      transition('flat <=> collapsed, default <=> collapsed, flat <=> default',
-                 animate(EXPANSION_PANEL_ANIMATION_TIMING)),
-    ]),
   ],
 })
 export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDestroy {
@@ -98,13 +92,13 @@ export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDest
     return this.hideToggle;
   }
 
-  /** Gets the panel's display mode. */
-  _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState | 'void' {
+  /** Determines whether the expansion panel should have spacing between it and its siblings. */
+  _hasSpacing(): boolean {
     if (this.accordion) {
-      return this.expanded ? this.accordion.displayMode : this._getExpandedState();
+      return (this.expanded ? this.accordion.displayMode : this._getExpandedState()) === 'default';
     }
 
-    return 'void';
+    return false;
   }
 
   /** Gets the expanded state string. */
diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
index 67c1b2363007..e43cf3f323b1 100644
--- a/src/lib/expansion/expansion.spec.ts
+++ b/src/lib/expansion/expansion.spec.ts
@@ -85,7 +85,7 @@ describe('MdExpansionPanel', () => {
     let panel = fixture.debugElement.query(By.css('md-expansion-panel'));
     let styles = getComputedStyle(panel.nativeElement);
 
-    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(panel.componentInstance._hasSpacing()).toBe(false);
     expect(styles.marginTop).toBe('13px');
     expect(styles.marginBottom).toBe('13px');
     expect(styles.marginLeft).toBe('37px');
@@ -97,7 +97,7 @@ describe('MdExpansionPanel', () => {
 
     styles = getComputedStyle(panel.nativeElement);
 
-    expect(panel.componentInstance._getDisplayMode()).toBe('void');
+    expect(panel.componentInstance._hasSpacing()).toBe(false);
     expect(styles.marginTop).toBe('13px');
     expect(styles.marginBottom).toBe('13px');
     expect(styles.marginLeft).toBe('37px');