Alinierea elementelor inline-block pe marginea dreaptă în CSS

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

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

Задание 1

Este dat un div în interiorul unui părinte:

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

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

Transformați div-copil într-un element inline-block, apoi aliniați-l pe marginea dreaptă a părintelui.

Задание 2

Modificați problema anterioară astfel încât div-ul să nu fie lipit strâns de marginea dreaptă. Pentru aceasta, adăugați părintelui padding drept.

Задание 3

Modificați problema anterioară astfel încât div-ul să nu fie lipit strâns de marginea dreaptă. Pentru aceasta, setați elementului-copil un margin drept.

Задание 4

Este dat un link în interiorul unui părinte:

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

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

Transformați link-ul într-un element inline-block, apoi aliniați-l pe marginea dreaptă a părintelui.

Задание 5

Modificați problema anterioară astfel încât textul din interiorul link-ului să fie aliniat pe centru acestui link.