如何在angular2材質中的md-card中添加填充？

Question

如何在angular2材質中添加md-card中的填充？我使用MD-卡顯示我的產品列表，但我不能對他們添加填充，這裏是我做的：

product.component.html：

<p> 
    Product List 
</p> 

<div class="container"> 
    <div class="col-sm-2 filter-area"> 
    <div>Filter area</div> 
    <div>Search area</div> 
    <div>Category area</div> 
    <div>Widget area</div> 
    </div> 
    <div class="col-sm-10"> 
    <md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,5): []); let i = index"> 

     <img md-card-image src="{{ data.url }}"> 
     <md-card-header> 
      <md-card-title>{{ data.title }}</md-card-title> 
     </md-card-header> 

     <md-card-actions> 
      <button md-button>Add to Cart</button> 
      <button md-button>Buy Now</button> 
     </md-card-actions> 

     </md-card> 
    </div> 
</div> 

，這裏是我的產品.component.ts：

myData: Array<any>; 

    constructor(private http:Http) { 
    this.http.get('https://jsonplaceholder.typicode.com/photos') 
     .map(response => response.json()) 
     .subscribe(res => this.myData = res); 
    } 

這就是我如何顯示我的JSON數據，這是我使用我的原型設計樣本JSON數據。下面是我使用（如果你觸發我的構造函數應該看起來像下面的地址）5 JSON數據：

[ 

    { 
     "albumId": 1, 
     "id": 1, 
     "title": "accusamus beatae ad facilis cum similique qui sunt", 
     "url": "http://placehold.it/600/92c952", 
     "thumbnailUrl": "http://placehold.it/150/92c952" 
    }, 
    { 
     "albumId": 1, 
     "id": 2, 
     "title": "reprehenderit est deserunt velit ipsam", 
     "url": "http://placehold.it/600/771796", 
     "thumbnailUrl": "http://placehold.it/150/771796" 
    }, 
    { 
     "albumId": 1, 
     "id": 3, 
     "title": "officia porro iure quia iusto qui ipsa ut modi", 
     "url": "http://placehold.it/600/24f355", 
     "thumbnailUrl": "http://placehold.it/150/24f355" 
    }, 
    { 
     "albumId": 1, 
     "id": 4, 
     "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae", 
     "url": "http://placehold.it/600/d32776", 
     "thumbnailUrl": "http://placehold.it/150/d32776" 
    }, 
    { 
     "albumId": 1, 
     "id": 5, 
     "title": "natus nisi omnis corporis facere molestiae rerum in", 
     "url": "http://placehold.it/600/f66b97", 
     "thumbnailUrl": "http://placehold.it/150/f66b97" 
    } 
] 

，這裏是我的CSS文件，product.component.css：

.example-card { 
    width: 220px; 
    float: left; 
    padding: 30px; 
    } 

.filter-area { 
    background-color: peachpuff; 
} 

這裏是我的應用程序截圖：

如何在那裏添加填充？

Answer 1

對於md卡不能應用填充。所以創建div並應用填充。

<div class="col-md-10"> 
    <md-card> 
     <div class="example-card" style="background-color: #40DEC8;"> 
      <img md-card-image src="{{ data.url }}"> 
     <md-card-header> 
      <md-card-title>{{ data.title }}</md-card-title> 
     </md-card-header> 

     <md-card-actions> 
      <button md-button>Add to Cart</button> 
      <button md-button>Buy Now</button> 
     </md-card-actions> 
     </div> 
     <!-- Other html --> 
    </md-card> 
</div> 

Answer 2

把話挑一個div內墊襯添加到類。根據需要使用firstchild和lastchild來創建CSS類。不要像我這裏使用內聯CSS。

<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div> 
<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div> 
<div layout="column" style="padding : 10px;"> 
    <md-card>Simple card</md-card> 
</div>