Ausrichtung von Inline-Block-Elementen am rechten Rand in CSS

Richten wir das Element am rechten Rand aus:

<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;
}

Gegeben ist ein Div innerhalb eines Elternelements:

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

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

Wandeln Sie das Child-Div in ein Inline-Block-Element um und richten Sie es dann am rechten Rand des Elternelements aus.

Modifizieren Sie die vorherige Aufgabe so, dass das Div nicht direkt am rechten Rand anliegt. Fügen Sie dazu dem Elternelement ein rechtes padding hinzu.

Modifizieren Sie die vorherige Aufgabe so, dass das Div nicht direkt am rechten Rand anliegt. Setzen Sie dazu für das Child-Element einen rechten margin.

Gegeben ist ein Link innerhalb eines Elternelements:

<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;
}

Wandeln Sie den Link in ein Inline-Block-Element um und richten Sie es dann am rechten Rand des Elternelements aus.

Modifizieren Sie die vorherige Aufgabe so, dass der Text innerhalb des Links zentriert in diesem Link ausgerichtet ist.