Understanding the CSS Box Model
CSS Box Model అంటే ఏమిటి?
Browser లో ప్రతి HTML element ఒక rectangular box లాగా కనిపిస్తుంది. ఆ box యొక్క పరిమాణం మరియు చుట్టూ ఉన్న spacing ను CSS Box Model వివరిస్తుంది.
ప్రతి element box లో సాధారణంగా నాలుగు భాగాలు ఉంటాయి:
- Content – అసలు text లేదా ఇతర content ఉండే భాగం.
- Padding – content మరియు border మధ్యలో ఉండే inner space.
- Border – padding చుట్టూ కనిపించే boundary line.
- Margin – element box బయట ఇతర elements నుండి ఉండే outer space.
Box Model క్రమం
లోపల నుండి బయటకు క్రమం ఇలా ఉంటుంది: Content → Padding → Border → Margin.
Width ఎలా లెక్కించబడుతుంది?
సాధారణంగా CSS లో box-sizing ఇవ్వకపోతే box-sizing: content-box default గా ఉంటుంది. ఈ సమయంలో width content భాగానికి మాత్రమే వర్తిస్తుంది. Padding మరియు border అదనంగా కలుస్తాయి.
ఉదాహరణకు, content width 260px, ఎడమ-కుడి padding మొత్తం 40px, ఎడమ-కుడి border మొత్తం 8px అయితే మొత్తం width 308px అవుతుంది.
Box Model అర్థం చేసుకోవడం వల్ల cards, buttons, forms మరియు page layouts లో unexpected size లేదా spacing సమస్యలను సులభంగా సరిచేయవచ్చు.
Simple Explanation
ఒక gift box ను ఊహించండి. Box లోని వస్తువు content. వస్తువు చుట్టూ ఉన్న ఖాళీ padding. Box యొక్క అంచు border. ఆ box మరియు మరో box మధ్య ఉన్న ఖాళీ margin.
CSS లో ఒక element కి width లేదా spacing ఇచ్చినప్పుడు ఈ నాలుగు భాగాలు కలిసి దాని final size మరియు position ను ప్రభావితం చేస్తాయి.
Real-Life Example
ఒక student ID card ను ఊహించండి. Card లో పేరు మరియు ID number ఉండే ప్రాంతం content. Text అంచుకు తగలకుండా లోపల ఇచ్చే ఖాళీ padding. Card చుట్టూ ఉన్న line border. రెండు cards మధ్య దూరం margin.
Code Examples
ఒక Card లో CSS Box Model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<style>
.card {
width: 260px;
padding: 20px;
border: 4px solid #2563eb;
margin: 30px;
background-color: #eff6ff;
}
.card h2 {
margin: 0 0 10px;
color: #1e3a8a;
}
.card p {
margin: 0;
color: #1f2937;
}
</style>
</head>
<body>
<article class="card">
<h2>Student Card</h2>
<p>This card demonstrates the CSS box model.</p>
</article>
</body>
</html>.card element లో width, padding, border మరియు margin ను కలిసి ఉపయోగించాం. width: 260px content భాగానికి వర్తిస్తుంది. ఎడమ మరియు కుడి padding మొత్తం 40px, borders మొత్తం 8px కాబట్టి content-box default లో card యొక్క మొత్తం horizontal size 308px అవుతుంది. margin: 30px card బయట ఖాళీని ఇస్తుంది.
Browser లో light blue background ఉన్న Student Card కనిపిస్తుంది. Card చుట్టూ 4px blue border ఉంటుంది. Text border నుండి 20px లోపల ఉంటుంది, మరియు card బయట 30px ఖాళీ ఉంటుంది.
Line-by-Line Explanation
ఈ selector class=”card” ఉన్న HTML element ను ఎంచుకుంటుంది. ఆ element పై Box Model properties వర్తిస్తాయి.
Card యొక్క content area width ను 260px గా సెట్ చేస్తుంది. Default content-box కారణంగా padding మరియు border ఈ width లో భాగం కావు.
Content చుట్టూ నాలుగు వైపులా 20px inner space ఇస్తుంది. అందువల్ల text border కు నేరుగా తగలదు.
Card చుట్టూ 4px మందం ఉన్న solid blue border ను సృష్టిస్తుంది. Border padding బయట ఉంటుంది.
Card box బయట నాలుగు వైపులా 30px outer space ఇస్తుంది. ఇది card మరియు ఇతర elements మధ్య దూరాన్ని ప్రభావితం చేస్తుంది.
Card యొక్క background కు light blue రంగు ఇస్తుంది. Background content మరియు padding ప్రాంతాల్లో కనిపిస్తుంది.
ఇది .card CSS rule ముగిసిందని సూచిస్తుంది.
ఈ HTML article element కు card class ఇచ్చాం. అందువల్ల .card rule లోని width, padding, border మరియు margin ఈ element పై అమలవుతాయి.
Student Card
Card లో heading content ను ఉంచుతుంది. ఈ content padding లోపల కనిపిస్తుంది.
This card demonstrates the CSS box model.
Paragraph కూడా card యొక్క content భాగం. ఇది border నుండి padding ఇచ్చినంత దూరంలో కనిపిస్తుంది.
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>Box Model Try It</title>
<style>
.box {
width: 220px;
padding: 15px;
border: 3px solid #16a34a;
margin: 25px;
background-color: #f0fdf4;
}
</style>
</head>
<body>
<div class="box">
<h2>Practice Box</h2>
<p>Change the box model values and observe the result.</p>
</div>
</body>
</html>Practice
Practice: పై code లో .notice element యొక్క padding ను 25px, border ను 5px solid red, margin ను 30px గా మార్చండి. Browser లో content, border మరియు box బయట spacing ఎలా మారుతుందో గమనించండి.
Hint: మీరు .notice rule లోని padding, border మరియు margin declarations మాత్రమే మార్చాలి.
Common Mistakes
padding ను ఉపయోగించకుండా content కు దగ్గరగా border ఉంచడం.Content మరియు border మధ్య inner space కోసం
padding ఉపయోగించండి. ఉదాహరణకు padding: 20px;.
padding ఉపయోగించడం.Element మరియు ఇతర elements మధ్య దూరం కోసం
margin ఉపయోగించండి. Padding element లోపల ఖాళీని మాత్రమే ఇస్తుంది.
width: 260px ఇచ్చినప్పుడు మొత్తం box width కూడా 260px అని అనుకోవడం.Default
content-box లో width content కు మాత్రమే వర్తిస్తుంది. Padding మరియు border అదనంగా కలుస్తాయని గుర్తుంచుకోండి.
border: 4px; అని మాత్రమే రాయడం.స్పష్టమైన border కోసం
border: 4px solid blue; వంటి valid shorthand ఉపయోగించండి.
Element లోపలి content spacing కోసం padding ఉపయోగించండి. Margin element box బయట మాత్రమే పనిచేస్తుంది.
Interview Questions
CSS Box Model లోని నాలుగు భాగాలు ఏమిటి?
Answer: Content, padding, border మరియు margin. Content లో అసలు data ఉంటుంది; padding content చుట్టూ inner space; border boundary; margin box బయట outer space.
Padding మరియు margin మధ్య తేడా ఏమిటి?
Answer: Padding element లోపల content మరియు border మధ్య ఖాళీని ఇస్తుంది. Margin element బయట ఇతర elements మధ్య ఖాళీని ఇస్తుంది.
Default content-box లో width దేనికి వర్తిస్తుంది?
Answer: Default box-sizing: content-box లో width content area కు మాత్రమే వర్తిస్తుంది. Padding మరియు border అదనంగా లెక్కించబడతాయి.
Box Model లో border ఎక్కడ ఉంటుంది?
Answer: Border padding బయట మరియు margin లోపల ఉంటుంది. క్రమం Content, Padding, Border, Margin.
Exam Questions
CSS Box Model యొక్క సరైన క్రమాన్ని రాయండి.
Answer:
Content → Padding → Border → Margin.
ఒక element కు width 200px, left-right padding మొత్తం 20px, left-right border మొత్తం 4px ఉంటే content-box default లో మొత్తం width ఎంత?
Answer:
224px. లెక్క: 200px + 20px padding + 4px border = 224px.
Element మరియు దాని చుట్టూ ఉన్న ఇతర elements మధ్య ఖాళీకి ఏ property ఉపయోగిస్తారు?
Answer:
margin property ఉపయోగిస్తారు.
Content మరియు border మధ్య ఖాళీకి ఏ property ఉపయోగిస్తారు?
Answer:
padding property ఉపయోగిస్తారు.
Quick Revision
- ప్రతి HTML element ను ఒక rectangular box గా browser పరిగణిస్తుంది.
- Box Model క్రమం: Content → Padding → Border → Margin.
- Padding content మరియు border మధ్య inner space.
- Border element యొక్క boundary line.
- Margin element బయట outer space.
- Default content-box లో width content కు మాత్రమే వర్తిస్తుంది; padding మరియు border అదనంగా చేరతాయి.
- Box Model ను అర్థం చేసుకోవడం వల్ల element size మరియు spacing ను సరిగ్గా నియంత్రించవచ్చు.