Radhitja e Elementeve Bllok në CSS

Vetia margin përdoret jo vetëm për të caktuar hapësira, por edhe për të përqendruar elementet bllok. Për këtë, hapësira e djathtë dhe e majtë duhet të caktohen në vlerën auto.

Në shembullin më poshtë, blloku i brendshëm do të vendoset në qendër:

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

css.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}

Результат:

Kini parasysh se në këtë mënyrë mund të përqendrohen vetëm elementet bllok, vetëm horizontalisht dhe vetëm nëse u është caktuar gjerësi.

Nëse kemi nevojë për hapësira të ndryshme sipër dhe poshtë për margin, atëherë mund të shkruajmë kështu:

css.child {
  margin: 30px auto 10px auto;
}

Mund të rishkruhet edhe me tre vlera: e para do të caktojë hapësirën e sipërme, e treta - atë të poshtme, ndërsa e dyta do të caktojë vlerën auto për hapësirat e djathtë dhe të majtë:

css.child {
  margin: 30px auto 10px;
}