如何在離子卡中設置內邊距？ 離子 4

Question

我正在嘗試制作一張只有文字的卡片，我希望文字與邊框保持一定的距離。

• 在第一種情況下，我為卡片設置了填充，但頂部和底部空間太大。

• 在第二種情況下，我不使用填充，但它也從左右刪除。

• 在第三種情況下，我只是使用一個骯臟的技巧將文本的開頭從我的這個CSS的左側移動 16px：

   .lefts { position: relative; left: 16px; }

  但是我仍然沒有修復右邊距，而且我認為這不是一個合適的解決方案

我想要的是？ 擁有一張像第二張（Desde Sevilla）那樣上下邊距的卡片，但像第一張（Desde Malaga）那樣左右

見.html

<ion-card padding>    
<ion-text class="bold" color="primary"><p>DESDE MALAGA</p></ion-text>
<ion-text color="dark"><p>Son 4 horas en <a href='http://www.tgcomes.es/horarios_3.htm'>Autobus</a> o 2.5 en coche (ruta muy comun en <a href='https://m.blablacar.es/ride-sharing/malaga/cadiz/'>Blablacar</a>)</p></ion-text>    
</ion-card>

<ion-card>    
  <ion-text class="bold" color="primary"><p>DESDE SEVILLA</p></ion-text>
  <ion-text color="dark"><p>Se tarda 1h45 en <a href='http://www.tgcomes.es/horarios_13.htm'>Autobus</a> o 1h40 en <a href='http://www.renfe.com/'>Tren hasi aiuu ei aiwh</a></p></ion-text>    
</ion-card>


<ion-card>    
  <ion-text class="bold.left" color="primary"><p>DESDE JEREZ</p></ion-text>
  <ion-text class="lefts" color="dark"><p>Es el aeropuerto mas pequeño, si viajas desde fuera de España tendrás que hacer escala en Madrid o Barcelona. Desde Jerez son 30 minutos en coche o 1 hora en <a href='http://www.aena.mobi/m/en/jerez-airport/train.html'>Transporte Publico.</a>
  Es posible que nosotros o alguien de nuestra familia os recoja.</p></ion-text>    
</ion-card>

我也在使用這個CSS，但我認為不相關，以防萬一：

ion-card {
    border-top: 3px solid #d15b5b;
    border-bottom: 3px solid #d15b5b;
    border-left: 3px solid #d15b5b;
    border-right: 3px solid #d15b5b    
}

Answer 1

離子卡{邊框：3px 實心 #d15b5b;padding: 10px 15px;}

Answer 2

理想情況下，您將按預期使用ion-card組件及其所有（或部分）子組件：

<ion-card>
  <ion-card-header>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Keep close to Nature's heart... and break clear away, once in awhile,
    and climb a mountain or spend a week in the woods. Wash your spirit clean.
  </ion-card-content>
</ion-card>

此處的填充由<ion-card-content> ，可以通過本地覆蓋 CSS 進行調整。

編輯：添加到Ionic 的 API 文檔的鏈接