如何在离子卡中设置内边距？离子4

Question

我正在尝试制作一张只有文字的卡片，我希望文字与边框保持一定距离。

在第一种情况下，我为卡片设置了填充，但顶部和底部 space太大了。
在第二种情况下我不使用填充，但它也从左右.
在第三种情况下，我只是使用了一个肮脏的技巧来移动开始从左边开始的文字 16px 我的这个 CSS:
```
.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

理想情况下，您将按预期使用 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。

编辑：将 link 添加到 Ionic's API doc

Answer 2

ion-card {边框：3px solid #d15b5b；填充：10px 15px；}

如何在离子卡中设置内边距？离子4

How to set inner margins in ion-card? Ionic 4

html

css

ionic-framework

ionic4