Ի՞նչ է մարկինգների կլանումը և ինչու է այն օգտագործվում:

CSS- ում մագնիսական շեղումները (margin collapsing) մեխանիզմ է, որի ժամանակ երկու կամ ավելի հարևան բլոկային տարրերի ուղղահայե՛ր մագնիսականները չեն գումարվում, այլ միաձուլվում են մեկ մագնիսական, որը հավասար է դրանցից ամենամեծին:

Մագնիսական շեղումը տեղի է ունենում հետևյալ դեպքերում՝

• Հարևան տարրեր: մեկ տարրի margin-bottom-ը և հաջորդ տարրի margin-top-ը:
• Հայր և առաջին/վերջին երեխա: հայր և նրա առաջին կամ վերջին երեխայի margin-top-ը կամ margin-bottom-ը։ Դա տեղի է ունենում, եթե նրանց միջև չկա սահման (border), հեռավորություն (padding), inline պարունակություն կամ եթե հայրն չի հանդիսանում flex/grid կոնտեյներ։
• Դատարկ բլոկներ: տարրի 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 */
}