Currently, I am attempting to create a card that contains text with specific spacing from the border.
My first attempt involved setting padding for the card, but I found that the top and bottom spacing was too large.
In my second attempt, I decided not to use padding at all, but this resulted in the removal of spacing on the right and left sides as well.
In a third approach, I resorted to a workaround by shifting the start of the text 16px from the left using the following CSS:
.lefts { position: relative; left: 16px; }However, this solution did not address the issue of the right margin, and it felt like an inadequate fix.
https://i.sstatic.net/QoXQ7.png
What's the goal? I aim to achieve a card layout with top and bottom margins similar to the second case (Desde Sevilla) but with equal spacing on the right and left like the first case (Desde Malaga)
Refer to the following HTML:
<ion-card padding>
<ion-text class="bold" color="primary"><p>DESDE MALAGA</p></ion-text>
<ion-text color="dark"><p>It takes 4 hours by <a href='http://www.tgcomes.es/horarios_3.htm'>Bus</a> or 2.5 hours by car (frequent route on <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>The journey takes 1h45 by <a href='http://www.tgcomes.es/horarios_13.htm'>Bus</a> or 1h40 by <a href='http://www.renfe.com/'>Train abcd efgh ijkl</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>This is the smallest airport, if you're traveling from outside Spain, you'll need to connect through Madrid or Barcelona. It takes 30 minutes by car from Jerez or 1 hour by <a href='http://www.aena.mobi/m/en/jerez-airport/train.html'>Public Transport.</a>
We may be able to pick you up ourselves or have a family member do so.</p></ion-text>
</ion-card>
I've also included this CSS, although I don't believe it is crucial:
ion-card {
border-top: 3px solid #d15b5b;
border-bottom: 3px solid #d15b5b;
border-left: 3px solid #d15b5b;
border-right: 3px solid #d15b5b
}