Padding

Padding అంటే ఏమిటి?

Padding అనేది ఒక element లోని content మరియు ఆ element యొక్క లోపలి అంచు మధ్య ఉండే ఖాళీ. ఇది content చుట్టూ లోపల spacing ను సృష్టిస్తుంది.

Padding వల్ల text లేదా ఇతర content box అంచులకు అంటుకోకుండా సౌకర్యంగా కనిపిస్తుంది. Padding ను pixels వంటి units తో రాయవచ్చు.

Padding ఎందుకు ఉపయోగిస్తాం?

• Text కు లోపల ఖాళీ ఇవ్వడానికి.
• Button లేదా card ను చదవడానికి సులభంగా చేయడానికి.
• Content అంచులకు అంటుకోకుండా ఉంచడానికి.
• ఒక element యొక్క లోపలి పరిమాణాన్ని పెంచడానికి.

Padding syntax

selector {
  padding: value;
}

ఉదాహరణకు, padding: 20px; అంటే content యొక్క నాలుగు వైపులా 20px లోపలి ఖాళీ వస్తుంది.

నాలుగు వైపుల padding

Padding ను నాలుగు వైపులా ఒకేలా లేదా ప్రతి వైపుకు వేరుగా ఇవ్వవచ్చు.

• padding: 20px; — నాలుగు వైపులా 20px.
• padding: 10px 20px; — పై, కింది 10px; ఎడమ, కుడి 20px.
• padding: 10px 15px 20px 25px; — పై, కుడి, కింది, ఎడమ క్రమంలో values.
• padding-top, padding-right, padding-bottom, padding-left — ఒక్కో వైపును విడిగా నియంత్రించడానికి.

రన్ చేయగల ఉదాహరణ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Padding Example</title>
  <style>
    .card {
      width: 260px;
      background-color: #e8f1ff;
      padding: 24px;
    }

    .card h2 {
      margin: 0;
    }
  </style>
</head>
<body>
  <section class="card">
    <h2>CSS Card</h2>
    <p>Padding gives space inside the card.</p>
  </section>
</body>
</html>

ఈ ఉదాహరణలో .card element లోని heading మరియు paragraph చుట్టూ 24px లోపలి ఖాళీ వస్తుంది.

Simple Explanation

ఒక cardboard box లో వస్తువు అంచులకు తగలకుండా లోపల కొంత ఖాళీ ఉంచుతారు. CSS లో అదే ఆలోచనను padding చేస్తుంది.

padding: 24px; అని రాస్తే content యొక్క పై, కుడి, కింది, ఎడమ వైపులా 24px ఖాళీ వస్తుంది. Padding పెంచితే content మరియు box edge మధ్య దూరం పెరుగుతుంది.

Padding అనేది element లోపల ఉంటుంది. అందువల్ల ఇది content కు breathing space ఇస్తుంది.

Real-Life Example

ఒక visiting card లో పేరు మరియు phone number కాగితం అంచులకు చాలా దగ్గరగా ఉంటే అది ఇబ్బందిగా కనిపిస్తుంది. అంచుల చుట్టూ ఖాళీ ఉంచితే card అందంగా, చదవడానికి సులభంగా ఉంటుంది. Website card లేదా button లో ఆ లోపలి ఖాళీని CSS padding ద్వారా ఇస్తాం.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Padding Example</title>
  <style>
    .card {
      width: 260px;
      background-color: #e8f1ff;
      padding: 24px;
    }

    .card h2 {
      margin: 0;
    }
  </style>
</head>
<body>
  <section class="card">
    <h2>CSS Card</h2>
    <p>Padding gives space inside the card.</p>
  </section>
</body>
</html>

Browser లో లేత నీలం background ఉన్న card కనిపిస్తుంది. Card లోని heading మరియు paragraph దాని అంచుల నుండి 24px లోపల కనిపిస్తాయి.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Padding</title>
  <style>
    .notice {
      width: 240px;
      background-color: #fff3cd;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="notice">
    <strong>Notice</strong>
    <p>Padding keeps this text away from the edges.</p>
  </div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Padding అనేది content మరియు element లోపలి అంచు మధ్య ఖాళీ.
• padding: 20px; నాలుగు వైపులా 20px ఖాళీ ఇస్తుంది.
• రెండు values ఉన్నప్పుడు మొదటిది top/bottom కు, రెండవది left/right కు వర్తిస్తుంది.
• నాలుగు values క్రమం top, right, bottom, left.
• ఒక్కో వైపును మార్చడానికి padding-top, padding-right, padding-bottom, padding-left ఉపయోగించాలి.