Uratibu Vipengele vya Inline-Block Kulia kwa CSS

html<div class="parent">
  <span class="child">maandishi</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

Amepewa div ndani ya mzazi fulani:

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

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

Badilisha div mtoto kuwa kipengele cha inline-block, kisha uratibu upande wa kulia wa mzazi.

Задание 2

Badilisha kazi iliyotangulia ili div isiwe imegusana na ukingo wa kulia. Kwa hili, ongeza padding wa kulia kwa kipengele cha mzazi.

Задание 3

Badilisha kazi iliyotangulia ili div isiwe imegusana na ukingo wa kulia. Kwa hili, weka margin wa kulia kwa kipengele mtoto.

Задание 4

Amepewa kiungo ndani ya mzazi fulani:

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

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

Badilisha kiungo kuwa kipengele cha inline-block, kisha uratibu upande wa kulia wa mzazi.

Задание 5

Badilisha kazi iliyotangulia ili maandishi ndani ya kiungo yauratibu katikati ya kiungo hicho.