Home » Tech Tutorials » Web Development » CSS » Margin Collapsing

Margin Collapsing

Margin Collapsing అంటే ఏమిటి?

రెండు block elements యొక్క vertical margins ఒకదానితో ఒకటి కలిసిపోయి ఒకే margin గా మారడాన్ని margin collapsing అంటారు.

సాధారణంగా ఒక element యొక్క margin-bottom మరియు దాని తరువాత వచ్చే element యొక్క margin-top కలిసినప్పుడు, అవి రెండూ కలిపి మొత్తం spacing ఇవ్వవు. ఎక్కువ విలువ ఉన్న margin మాత్రమే ఉపయోగించబడుతుంది.

ఉదాహరణకు, మొదటి paragraph కు margin-bottom: 30px మరియు రెండవ paragraph కు margin-top: 20px ఉంటే, మధ్యలో spacing 50px కాదు. పెద్ద విలువ అయిన 30px మాత్రమే వర్తిస్తుంది.

Margin Collapsing ఎప్పుడు కనిపిస్తుంది?

  • సాధారణ block elements ఒకదాని క్రింద మరొకటి ఉన్నప్పుడు.
  • Vertical margins, అంటే top మరియు bottom margins, కలిసినప్పుడు.
  • రెండు margins మధ్యలో border, padding లేదా ఇతర separating content లేనప్పుడు.

ముఖ్యమైన నియమం

Adjacent vertical margins collapse అయినప్పుడు, చిన్న margin తీసివేయబడుతుంది మరియు పెద్ద margin మాత్రమే మిగులుతుంది. ఇది horizontal margins కు సాధారణంగా వర్తించదు.

Margin collapsing అనేది CSS లో spacing ను అనుకోకుండా ఎక్కువగా పెరగకుండా ఉంచుతుంది. అయితే layout ను అర్థం చేసుకునేటప్పుడు ఇది beginnerలకు కొంత confusion కలిగించవచ్చు.

Simple Explanation

ఒక box కింద 30px ఖాళీ, తరువాతి box పై 20px ఖాళీ ఉంటే, browser 50px ఖాళీ ఇవ్వదు. ఆ రెండు vertical margins collapse అయి పెద్ద విలువ అయిన 30px మాత్రమే కనిపిస్తుంది.

అందువల్ల block elements మధ్య distance లెక్కించేటప్పుడు margin-top మరియు margin-bottom ను ఎప్పుడూ నేరుగా కలపకండి. అవి collapse అవుతున్నాయా అని చూడండి.

Real-Life Example

రెండు పుస్తకాలను ఒకదాని కింద మరొకటి ఉంచినట్లు ఊహించండి. మొదటి పుస్తకం కింద 30px ఖాళీ, రెండవ పుస్తకం పై 20px ఖాళీ ఉన్నాయి. రెండు ఖాళీలను కలిపి 50px చేయకుండా, వాటిలో పెద్ద ఖాళీ అయిన 30px మాత్రమే ఉంచినట్లుగా margin collapsing పనిచేస్తుంది.

Code Examples

Adjacent Paragraph Margins Collapse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Margin Collapsing</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f3f6fa;
      padding: 20px;
    }

    .card {
      max-width: 420px;
      background-color: white;
      padding: 20px;
      border: 1px solid #cccccc;
    }

    h2 {
      margin: 0 0 30px;
      color: #17365d;
    }

    p {
      margin: 20px 0 0;
      color: #333333;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Daily Task</h2>
    <p>Read one CSS lesson today.</p>
  </div>
</body>
</html>

ఇక్కడ <h2> యొక్క bottom margin 30px మరియు <p> యొక్క top margin 20px ఉన్నాయి. ఈ రెండు vertical margins మధ్యలో కలిసినప్పుడు 30px + 20px = 50px కాదు. పెద్ద విలువ అయిన 30px మాత్రమే spacing గా కనిపిస్తుంది.

ఈ example ను browser editor లో run చేసి, <h2> యొక్క margin-bottom లేదా <p> యొక్క margin-top విలువలను మార్చి ఫలితాన్ని గమనించండి.

లేత బూడిద background పై తెల్లని card కనిపిస్తుంది. Card లో Daily Task heading మరియు దాని క్రింద paragraph కనిపిస్తాయి. Heading మరియు paragraph మధ్య vertical spacing 50px కాదు; margin collapsing కారణంగా పెద్ద margin అయిన 30px కు సమీపంగా ఉంటుంది.

Line-by-Line Explanation

.card {

ఈ selector card class ఉన్న div ను ఎంచుకుంటుంది. అందులో ఉన్న heading మరియు paragraph ను ఒకే box లో చూపించడానికి ఇది ఉపయోగించబడింది.

padding: 20px;

Card యొక్క content మరియు card edge మధ్య 20px internal space ఇస్తుంది. ఇది padding; margin collapsing కు సంబంధించిన బయట spacing కాదు.

border: 1px solid #cccccc;

Card చుట్టూ border ఇస్తుంది. Border ఉన్నందువల్ల card లోపల మరియు బయట ఉన్న margins ఒకదానితో ఒకటి collapse కావు.

h2 {

ఈ selector card లోని heading ను ఎంచుకుంటుంది.

margin: 0 0 30px;

ఈ shorthand లో top margin 0, left and right margins 0, bottom margin 30px. కాబట్టి heading కింద 30px vertical margin ఉంది.

p {

ఈ selector paragraph element ను ఎంచుకుంటుంది.

margin: 20px 0 0;

Paragraph కు top margin 20px, left and right margins 0, bottom margin 0 ఇస్తుంది. Heading యొక్క 30px bottom margin తో paragraph యొక్క 20px top margin adjacent గా ఉన్నాయి.

ఈ div card class ను ఉపయోగించి heading మరియు paragraph ను ఒక container లో ఉంచుతుంది.

Daily Task

ఇది heading content. దీనికి CSS లో 30px bottom margin వర్తిస్తుంది.

Read one CSS lesson today.

ఇది heading తరువాత వచ్చే block paragraph. దీనికి 20px top margin ఉంది. Heading margin తో ఇది collapse అవుతుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Margin Collapsing</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f2f2f2;
    }

    h2 {
      margin-bottom: 25px;
    }

    p {
      margin-top: 15px;
      background-color: white;
      padding: 12px;
      border: 1px solid #cccccc;
    }
  </style>
</head>
<body>
  <h2>Practice Spacing</h2>
  <p>These vertical margins can collapse.</p>
</body>
</html>

Try It Yourself »

Practice

Practice: practice_code లో .first యొక్క margin-bottom ను 40px గా, .second యొక్క margin-top ను 15px గా మార్చండి. రెండు boxes మధ్య spacing 55px కాకుండా పెద్ద margin అయిన 40px కు సమానంగా ఉందో browser లో పరీక్షించండి.

Hint: .first మరియు .second selectors లోని margin values ను మాత్రమే మార్చండి. రెండు elements block elements గా ఒకదాని తరువాత మరొకటి ఉన్నాయి.

Common Mistakes

రెండు vertical margins ఎప్పుడూ కలుస్తాయని భావించి 20px + 30px = 50px spacing వస్తుందని అనుకోవడం.
Adjacent block elements యొక్క vertical margins collapse కావచ్చు. అప్పుడు రెండు విలువల్లో పెద్దది మాత్రమే సాధారణంగా ఉపయోగించబడుతుంది.
Margin collapsing horizontal margins కు కూడా అదే విధంగా జరుగుతుందని అనుకోవడం.
ఈ lesson లోని margin collapsing ప్రధానంగా adjacent vertical margins, అంటే top మరియు bottom margins కు సంబంధించినది.
Padding మరియు margin ఒకటే అని భావించడం.
Padding element లోపల content చుట్టూ space ఇస్తుంది. Margin element బయట space ఇస్తుంది. Margin collapsing margins మధ్య జరుగుతుంది, padding మధ్య కాదు.
ఒక element కు margin-bottom మరియు తరువాతి element కు margin-top రెండూ ఉన్నప్పుడు spacing ఎందుకు ఊహించినంతగా పెరగడం లేదో పరిశీలించకపోవడం.
Browser developer tools లేదా values మార్చి పరీక్షించండి. మధ్యలో border లేదా padding లేకపోతే vertical margins collapse అయ్యే అవకాశం ఉంది.

Interview Questions

CSS లో margin collapsing అంటే ఏమిటి?

Answer: రెండు adjacent block elements యొక్క vertical margins కలిసిపోయి ఒకే margin గా మారడాన్ని margin collapsing అంటారు.

ఒక element కు margin-bottom: 30px మరియు తరువాతి element కు margin-top: 20px ఉంటే సాధారణంగా మధ్యలో ఎంత spacing కనిపిస్తుంది?

Answer: Margins collapse అయితే 50px కాదు, పెద్ద విలువ అయిన 30px మాత్రమే సాధారణంగా కనిపిస్తుంది.

Margin collapsing ఏ directions లో సాధారణంగా కనిపిస్తుంది?

Answer: ఇది ప్రధానంగా vertical directions లో, అంటే margin-top మరియు margin-bottom మధ్య కనిపిస్తుంది.

Padding మరియు margin collapsing మధ్య సంబంధం ఏమిటి?

Answer: Padding element లోపల space ఇస్తుంది. Margin element బయట space ఇస్తుంది. Padding margin కాదు, కాబట్టి margins ను padding లాగా collapse చేయదు.

Exam Questions

రెండు adjacent block elements యొక్క vertical margins 40px మరియు 15px. అవి collapse అయితే ఎంత margin ఉపయోగించబడుతుంది?

Answer:

40px ఉపయోగించబడుతుంది, ఎందుకంటే పెద్ద vertical margin మాత్రమే మిగులుతుంది.

Margin collapsing సాధారణంగా margin-top మరియు margin-left మధ్య జరుగుతుందా?

Answer:

లేదు. Margin collapsing ప్రధానంగా vertical margins అయిన margin-top మరియు margin-bottom మధ్య జరుగుతుంది.

Margin collapsing లో రెండు margins ను నేరుగా కలపడం సరైనదేనా?

Answer:

లేదు. Adjacent vertical margins collapse అయితే వాటిలో పెద్ద విలువ మాత్రమే సాధారణంగా ఉపయోగించబడుతుంది.

Quick Revision

  • Margin collapsing అంటే adjacent vertical margins ఒకే margin గా కలవడం.
  • margin-bottom మరియు తరువాతి margin-top collapse కావచ్చు.
  • Collapsed margins సాధారణంగా కలిపి మొత్తం ఇవ్వవు; పెద్ద విలువ మాత్రమే ఉపయోగించబడుతుంది.
  • Margin collapsing ప్రధానంగా block elements యొక్క vertical margins లో కనిపిస్తుంది.
  • Padding లోపలి space; margin బయట space.
  • Spacing అనుకోకుండా తక్కువగా కనిపిస్తే adjacent vertical margins collapse అవుతున్నాయా అని తనిఖీ చేయాలి.

Test Your Knowledge

Take a short quiz based on this lesson.

10 Questions • Results
Scroll to Top