Чӣ тавр фишурдани маржа (margin collapse) ва барои чӣ…

Механизми дар CSS, ки марзҳоро (margin collapsing) мепайвандад, ба он маъноест, ки вақте ду ё бештар аз ду элементи блокии ҳамсояи вертикалӣ, инчунин падар ва аввалин/охирин фарзандаш, дар назар гирифта мешаванд, марзҳои онҳо ҷамъ намешаванд, балки ба як марз, ки баробар ба калонтарин аз онҳо аст, ҳамҷоя мешаванд.

Ҳамҷояшавӣ дар ҳолатҳои зерин рух медиҳад:

Элементҳои ҳамсоя: margin-bottom-и болоии як элемент ва margin-top-и ояндаи он.
Падар ва аввалин/охирин фарзанд: margin-top-и падар ва margin-top-и аввалин фарзанд; margin-bottom-и падар ва margin-bottom-и охирин фарзанд. Агар байни онҳо ҳеҷ гуна марз (border), отступ (padding), мундариҷаи inline ё падар не бошад, ин амал сурат мегирад.
Блокҳои холӣ: margin-top ва margin-bottom-и элемент, агар он мундариҷа, марз ё отступ надошта бошад.

Масалан барои элементҳои ҳамсоя:

<div style="margin-bottom: 20px;">Элемент 1</div>
<div style="margin-top: 30px;">Элемент 2</div>

Дар ин ҳолат, фосила байни элементҳо 30px хоҳад буд, на 50px.

Масалан барои падар ва аввалин фарзанд:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Фарзанди элемент</div>
</div>

Фосила аз канори болоии падар то мундариҷаи он 40px хоҳад буд.

Барои чӣ истифода мешавад:

Ҳамҷояшавии марзҳо кӯмак мекунад, ки фосилаҳои уфуқӣ байни блокҳоро дар ҷараёни одии ҳуҷҷат назоратшаванда нигоҳ дорад, ва аз фосилаҳои зиёдатӣ пешгирӣ мекунад. Ин ба сохтани ритми уфуқии мутобиқ кӯмак мекунад, зеро дизайнёрон метавонанд марзҳоро барои параграфҳо ё сарлавҳаҳо мустақилона муайян кунанд, ва браузер ба таври худкор ҷойро дуруст муттаҳид мекунад.

Чӣ гуна пешгирӣ кардан:

Бо илова кардани марз (border) байни элементҳо ё байни падар ва фарзанд.
Бо илова кардани отступ (padding) байни онҳо.
Бо истифода аз хосияти overflow бо арзиши ғайри visible дар падар.
Бо истифода аз элементҳои float.
Бо истифода аз ҷойгиркунии absolute ё fixed.
Бо табдил додани элементҳо ба контексти форматинг Flexbox ё Grid (падар).
Бо табдил додани элемент ба inline-block.

/* Пешгирӣ барои падар ва фарзанд */
.parent {
  border-top: 1px solid transparent; /* ё padding-top */
}

/* Пешгирӣ барои элементҳои ҳамсоя */
.element + .element {
  margin-top: 0; /* ё border-top */
}

Чӣ тавр фишурдани маржа (margin collapse) ва барои чӣ истифода мешавад?