CSS:ssä inline-block-elementtien oikean reunan tasaus

Tasataan elementti oikeaan reunaan:

<div class="parent">
	<span class="child">text</span>
</div>

.parent {
	text-align: right;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

On annettu div jonkin vanhemman sisällä:

<div class="parent">
	<div class="child">text</div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

Muunna div-lapsielementti inline-block- elementiksi, sitten tasaa se vanhemman oikeaan reunaan.

Muokkaa edellistä tehtävää siten, että div ei painaudu tiukasti oikeaan reunaan. Tätä varten lisää vanhempaelementille oikea padding.

Muokkaa edellistä tehtävää siten, että div ei painaudu tiukasti oikeaan reunaan. Tätä varten aseta lapsielementille oikea margin.

On annettu linkki jonkin vanhemman sisällä:

<div class="parent">
	<a href="" class="child">text</a>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	width: 100px;
	padding: 10px;
	border: 1px solid green;
}

Muunna linkki inline-block-elementiksi, sitten tasaa se vanhemman oikeaan reunaan.

Muokkaa edellistä tehtävää siten, että linkin sisällä oleva teksti on keskitetty tämän linkin sisälle.