Width and Height

Width and Height అంటే ఏమిటి?

CSSలో width property ఒక element ఎంత వెడల్పుగా ఉండాలో నిర్ణయిస్తుంది. height property ఆ element ఎంత ఎత్తుగా ఉండాలో నిర్ణయిస్తుంది.

ఈ propertiesను ఉపయోగించి card, box, image container, form area వంటి elements పరిమాణాన్ని నియంత్రించవచ్చు.

Syntax

.box {
  width: 320px;
  height: 150px;
}

width మరియు height valuesకు సాధారణంగా px, %, vw, vh వంటి units ఉపయోగిస్తాం. auto ఉపయోగిస్తే browser content లేదా parent element ఆధారంగా పరిమాణాన్ని నిర్ణయిస్తుంది.

ఎలా పనిచేస్తాయి?

• width: 300px; element వెడల్పును 300 pixelsగా చేస్తుంది.
• height: 120px; element ఎత్తును 120 pixelsగా చేస్తుంది.
• width: 80%; parent element వెడల్పులో 80 శాతం తీసుకుంటుంది.
• height: auto; contentకు సరిపోయే ఎత్తును browser నిర్ణయిస్తుంది.

Fixed size కావాల్సిన card లేదా bannerకు pixels ఉపయోగించవచ్చు. Parent sizeకు అనుగుణంగా మారే layoutకు percentage లేదా viewport unit ఉపయోగించవచ్చు.

గమనించాల్సిన విషయం

Elementలోని text నిర్ణయించిన height కంటే ఎక్కువగా ఉంటే text బయటకు కనిపించవచ్చు లేదా layoutలో ఇబ్బంది రావచ్చు. అందువల్ల fixed heightను జాగ్రత్తగా ఉపయోగించాలి. Content పరిమాణం మారవచ్చని అనుకుంటే height: auto; తరచుగా ఉపయోగకరంగా ఉంటుంది.

Simple Explanation

ఒక boxను ఇంట్లోని గది లాగా ఊహించండి. width గది వెడల్పు, height గది ఎత్తు. CSSలో valueతో పాటు unit కూడా ఇవ్వాలి. ఉదాహరణకు width: 300px; అంటే box వెడల్పు 300 pixels. height: 120px; అంటే box ఎత్తు 120 pixels.

Real-Life Example

ఒక product cardను తయారు చేస్తున్నప్పుడు ప్రతి card ఒకే పరిమాణంలో కనిపించాలి. అందుకోసం cardకు width: 280px; మరియు height: 180px; ఇవ్వవచ్చు. ఇలా చేయడం వల్ల cards ఒకే రీతిగా కనిపిస్తాయి.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width and Height</title>
  <style>
    .card {
      width: 320px;
      height: 160px;
      background-color: #e8f1ff;
      border: 2px solid #2563eb;
      padding: 20px;
    }

    .card h2 {
      margin-top: 0;
      color: #123b75;
    }
  </style>
</head>
<body>
  <section class="card">
    <h2>CSS Card</h2>
    <p>This card has a fixed width and height.</p>
  </section>
</body>
</html>

Browserలో లేత నీలం background, నీలం border ఉన్న card కనిపిస్తుంది. Card యొక్క CSS width 320 pixels మరియు height 160 pixelsగా ఉంటుంది. Cardలో CSS Card అనే heading మరియు ఒక paragraph కనిపిస్తాయి.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Try Width and Height</title>
  <style>
    .box {
      width: 280px;
      height: 140px;
      background-color: #fff3cd;
      border: 2px solid #d39e00;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>Try It</h2>
    <p>Change the width and height values.</p>
  </div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• width element యొక్క వెడల్పును నిర్ణయిస్తుంది.
• height element యొక్క ఎత్తును నిర్ణయిస్తుంది.
• Pixels ఉపయోగించినప్పుడు value తర్వాత px రాయాలి.
• width మరియు heightను class selector ద్వారా HTML elementకు apply చేయవచ్చు.
• Content మారే అవకాశం ఉన్నప్పుడు fixed heightను జాగ్రత్తగా ఉపయోగించాలి.
• auto valueను browser స్వయంగా పరిమాణాన్ని నిర్ణయించడానికి ఉపయోగించవచ్చు.