html - 如何在带有某种颜色的 ionic 2 中的标题和 ionic 卡之间添加空格？

Question

我想在标题和第一张卡片开始之间添加一个灰色空间。 并想删除屏幕中卡片顶部区域的突出显示行，我在提供的屏幕截图中提到了它。

.html

<ion-header>

  <ion-toolbar>
    <img>
    <ion-title>Ion Cards</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

  <ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>

</ion-card>

</ion-content>

enter image description here

Answer 1

在标题中添加底部边框。

ion-header {
border-bottom: 10px solid gray;
}