Ի՞նչ է CSS-ում սահմանների կլանումը։

CSS-ում մարգինների կլանումը (margin collapsing) երևույթ է, երբ երկու կամ ավելի հարևան բլոկների ուղղահայաց մարգինները միավորվում են մեկ մարգինի մեջ: Այս ընդհանուր մարգինի չափը որոշվում է ամենամեծ արժեքով, որը գտնվում է միավորվող մարգինների մեջ:

Հիմնական կանոնները:

• Միայն ուղղահայաց մարգինները (margin-top և margin-bottom) կարող են կլանվել: Հորիզոնական մարգինները չեն կլանվում:
• Միայն հարևան տարրերի մարգինները կլանվում են, եթե նրանց միջև այլ տարրեր, padding, border կամ բլոկային պարունակություն չկան:
• Առաջին երեխայի վերևի մարգինը կլանվում է նրա ծնողի վերևի մարգինի հետ, եթե նրանց միջև չկա padding, border կամ այլ պարունակություն:
• Վերջին երեխայի ներքևի մարգինը կլանվում է նրա ծնողի ներքևի մարգինի հետ, եթե նրանց միջև չկա padding, border կամ այլ պարունակություն:
• Դատարկ տարրերի վերևի և ներքևի մարգինները կարող են կլանվել, եթե նրանց մեջ չկա padding, border կամ պարունակություն:
• Եթե միավորվող մարգիններից մեկը բացասական է, վերջնական չափը հավասար է դրական և բացասական արժեքների գումարին (կամ ամբողջական արժեքին, եթե երկուսը բացասական են և գումարը փոքր է զրոյից):

Օրինակ:

<div class="box1">Էլեմենտ 1</div>
<div class="box2">Էլեմենտ 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Այս դեպքում box1 և box2 միջև ուղղահայաց հեռավորությունը կլինի 30px (ամենամեծը 20px և 30px-ից), ոչ թե 50px:

Ինչպես կանխել կլանումը:

• Ավելացնել padding կամ border տարրերի միջև:
• Ստեղծել նոր ձևաչափավորման բլոկ (օրինակ, overflow: hidden, display: flow-root կամ լողացող տարրեր օգտագործելով):
• Օգտագործել display: inline-block, display: flex կամ display: grid տարրերի համար:
• Օգտագործել բացարձակ դիրքավորում: