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

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

Խտացումը տեղի է ունենում հետևյալ դեպքերում՝

• Հարևան տարրերի միջև: Երկու հարևան տարրերի ուղղահայաց մարգինները խտանում են։

  <p>Հոդված 1</p>
  <p>Հոդված 2</p>
  

  Եթե <p>-ն ունի համապատասխան margin-bottom և margin-top, այդ մարգինները կարող են խտանալ։

• Հայր և նրա առաջին/վերջին երեխայի միջև: Եթե հայր տարրն չունի border, padding, display: flex, display: grid, overflow: hidden կամ այլ հատկություններ, որոնք ստեղծում են ձևաչափման կոնտեքստ, նրա վերևի մարգինն կարող է խտանալ առաջին երեխայի margin-top-ի հետ։ Նմանապես, հայր տարրն իր վերջին երեխայի margin-bottom-ի հետ կարող է խտանալ։

  <div class="parent">
    <p class="child">Երեխայի տարր</p>
  </div>
  

• Դատարկ տարրում: Եթե տարրն իր բովանդակությունը չունի (height: 0, առանց border և padding), նրա վերևի և ներքևի մարգինները կարող են խտանալ։

  <div class="empty"></div>
  

Տախտակ, որը ցույց է տալիս խտացման արդյունքները՝

Margin 1	Margin 2	Խտացման արդյունք
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Մարգինների խտացումը տեղի է ունենում միայն ուղղահայաց ուղղությամբ (margin-top և margin-bottom)։ Հորիզոնական մարգինները (margin-left և margin-right) երբեք չեն խտանում։

Կան միջոցներ խտացումը կանխելու համար, օրինակ՝ border, padding ավելացնելը, օգտագործել display: flex, display: grid, overflow: hidden կամ ստեղծել նոր ձևաչափման կոնտեքստ՝ display: flow-root-ի միջոցով։