Content Area

Content Area అంటే ఏమిటి?

CSS Box Model లో Content Area అనేది ఒక element లోని అసలు content ఉండే లోపలి భాగం. ఉదాహరణకు ఒక paragraph లో కనిపించే text, ఒక heading లోని text లేదా image ఉండే స్థలం Content Area లోకి వస్తాయి.

సాధారణంగా CSS లో ఒక element కు width మరియు height ఇచ్చినప్పుడు, అవి ఆ element యొక్క Content Area కు వర్తిస్తాయి. అంటే ఆ width మరియు height లో padding, border, margin కలవు.

Content Area ఎలా పనిచేస్తుంది?

• width content యొక్క అడ్డ వెడల్పును నిర్ణయిస్తుంది.
• height content యొక్క నిలువు ఎత్తును నిర్ణయిస్తుంది.
• Text లేదా ఇతర content ఈ area లోనే కనిపిస్తుంది.
• Default గా CSS box-sizing: content-box విధానాన్ని ఉపయోగిస్తుంది.

ఉదాహరణకు ఒక box కు width: 300px మరియు height: 100px ఇస్తే, ఆ box యొక్క content area 300 pixels వెడల్పు మరియు 100 pixels ఎత్తు ఉంటుంది.

Content Area ఎందుకు ఉపయోగకరం?

ఒక element లో text లేదా ఇతర content ఎంత స్థలంలో కనిపించాలో నియంత్రించడానికి Content Area ఉపయోగపడుతుంది. Cards, notices, headings, articles మరియు forms లో content కు సరైన పరిమాణం ఇవ్వడానికి ఇది ఉపయోగకరం.

గుర్తుంచుకోవాల్సిన విషయం

Default content-box విధానంలో width మరియు height కేవలం content area కు మాత్రమే వర్తిస్తాయి. తరువాత నేర్చుకునే padding మరియు border అదనంగా స్థలాన్ని తీసుకోవచ్చు.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Content Area Example</title>
  <style>
    .content-box {
      width: 300px;
      height: 100px;
      border: 3px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="content-box">
    This text is inside the content area.
  </div>
</body>
</html>

ఈ ఉదాహరణలో width: 300px మరియు height: 100px content area పరిమాణాన్ని నిర్ణయిస్తాయి. నీలం border content area చుట్టూ కనిపిస్తుంది.

Simple Explanation

ఒక CSS box ను ఒక గది లాగా ఊహించుకోండి. ఆ గదిలో వస్తువులు ఉంచే అసలు ఖాళీ స్థలం Content Area. HTML element లోని text లేదా image ఈ స్థలంలో కనిపిస్తుంది.

width content ఎంత వెడల్పుగా ఉండాలో, height content ఎంత ఎత్తుగా ఉండాలో నిర్ణయిస్తాయి. Default గా ఈ పరిమాణాల్లో padding మరియు border కలవు; అవి content area వెలుపల ఉంటాయి.

Real-Life Example

ఒక notice card ను ఊహించుకోండి. ఆ card లో notice text ఉంచే అసలు స్థలం Content Area. ఆ text కు 300px వెడల్పు మరియు 100px ఎత్తు కేటాయిస్తే, ఆ కొలతలు text ఉండే లోపలి స్థలానికి వర్తిస్తాయి. Card చుట్టూ ఉండే border లేదా తరువాత జోడించే padding అదనపు భాగాలుగా ఉంటాయి.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Content Area Example</title>
  <style>
    .content-box {
      width: 300px;
      height: 100px;
      border: 3px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="content-box">
    This text is inside the content area.
  </div>
</body>
</html>

Browser లో ఒక div కనిపిస్తుంది. దాని content area 300px వెడల్పు మరియు 100px ఎత్తుగా ఉంటుంది. చుట్టూ 3px నీలం border ఉంటుంది మరియు లోపల text కనిపిస్తుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Content Area</title>
  <style>
    .message {
      width: 240px;
      height: 80px;
      border: 2px solid #15803d;
    }
  </style>
</head>
<body>
  <div class="message">
    This message is inside the content area.
  </div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Content Area లో element యొక్క అసలు text, image లేదా ఇతర content ఉంటుంది.
• width content area యొక్క వెడల్పును నిర్ణయిస్తుంది.
• height content area యొక్క ఎత్తును నిర్ణయిస్తుంది.
• Default గా CSS box-sizing: content-box విధానాన్ని ఉపయోగిస్తుంది.
• Default విధానంలో padding మరియు border, content area వెలుపల అదనపు స్థలాన్ని తీసుకుంటాయి.
• Content Area ను చూడటానికి border ను ఉపయోగించి దాని boundary ని స్పష్టంగా గమనించవచ్చు.