I am trying to build a card with just text and I want the text to be at certain distance to the border.
In the first case I set a padding for the card but the top and bottom space is too big.
In the second case I dont use padding, but it is removed also from right and left.
In the third case I am just using a dirty trick moving the start of the text 16px from the left my this CSS:
.lefts {
position: relative;
left: 16px;
}
But still Im not fixing the right margin, and moreover I dont think this is a proper solution
What I want? To have a card with the top and bottom margins like in the second (Desde Sevilla) but with the right and left like the first one (Desde Malaga)
See .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>
I am also using this CSS but I dont think is relevant, just in case:
ion-card {
border-top: 3px solid #d15b5b;
border-bottom: 3px solid #d15b5b;
border-left: 3px solid #d15b5b;
border-right: 3px solid #d15b5b
}
ion-card {border: 3px solid #d15b5b;padding: 10px 15px;}