Box Sizing
Box Sizing అంటే ఏమిటి?
box-sizing అనేది ఒక element యొక్క width మరియు height ను browser ఎలా లెక్కించాలో నిర్ణయించే CSS property.
సాధారణంగా ఒక box కి width, padding, border ఉంటాయి. వీటిని మొత్తం పరిమాణంలో ఎలా కలపాలో box-sizing నిర్ణయిస్తుంది.
box-sizing: content-box
ఇది default value. ఇందులో ఇచ్చిన width అనేది content area యొక్క width మాత్రమే. Padding మరియు border width కి అదనంగా కలుస్తాయి.
ఉదాహరణకు width: 200px, padding: 20px, border: 5px ఉంటే మొత్తం width: 200 + 20 + 20 + 5 + 5 = 250px.
box-sizing: border-box
ఇందులో ఇచ్చిన width లో content, padding మరియు border అన్నీ కలిసే ఉంటాయి. అందువల్ల box యొక్క మొత్తం outer width ఇచ్చిన width కి సమానంగా ఉంటుంది.
width: 200px, padding: 20px, border: 5px ఉంటే మొత్తం outer width 200px. Padding మరియు border పెరిగితే content area చిన్నదవుతుంది.
ఎందుకు ఉపయోగించాలి?
Layouts లో box size ఊహించిన దానికంటే పెరగకుండా ఉండటానికి box-sizing: border-box చాలా ఉపయోగకరం. Cards, forms, columns మరియు responsive layouts లో ఇది సులభంగా పనిచేస్తుంది.
Universal box-sizing rule
చాలా projects లో అన్ని elements కోసం ఈ rule ఉపయోగిస్తారు:
* {
box-sizing: border-box;
}ఇలా చేస్తే ప్రతి element యొక్క width మరియు height లో padding, border కూడా లెక్కలోకి వస్తాయి.
Simple Explanation
ఒక gift box యొక్క బయట పరిమాణాన్ని మీరు 200px గా నిర్ణయించారని అనుకోండి. ఆ box కి లోపల padding మరియు బయట border జోడించినా బయట పరిమాణం 200px గానే ఉండాలి అనుకుంటే border-box ఉపయోగించాలి.
content-box లో width content కి మాత్రమే ఉంటుంది. Padding మరియు border అదనంగా చేరి box పెద్దదవుతుంది.
border-box లో width మొత్తం box కి ఉంటుంది. Content, padding మరియు border ఆ width లోనే సరిపోతాయి.
Real-Life Example
ఒక website లో రెండు cards ఒక్కొక్కటి 250px width గా ఉండాలి అనుకుందాం. content-box ఉపయోగించి ప్రతి card కి padding మరియు border ఇస్తే అవి 250px కంటే వెడల్పుగా మారవచ్చు. దాంతో cards ఒకే row లో సరిపోకపోవచ్చు.
border-box ఉపయోగిస్తే padding, border కలిపినా card యొక్క మొత్తం width 250px గానే ఉంటుంది. అందువల్ల layout ను నియంత్రించడం సులభం.
Code Examples
content-box మరియు border-box పోలిక
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Sizing Example</title>
<style>
.box {
width: 220px;
padding: 20px;
border: 5px solid #2563eb;
margin: 12px;
background-color: #dbeafe;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Box Sizing</h1>
<div class="box content-box">content-box</div>
<div class="box border-box">border-box</div>
</body>
</html>రెండు div elements కి ఒకే width, padding మరియు border ఇచ్చాం. మొదటి box లో content-box ఉండటం వల్ల padding మరియు border అదనంగా చేరి అది వెడల్పుగా కనిపిస్తుంది. రెండవ box లో border-box ఉండటం వల్ల మొత్తం outer width 220px లోనే content, padding మరియు border సరిపోతాయి.
పేజీలో Box Sizing అనే heading మరియు రెండు నీలం border ఉన్న boxes కనిపిస్తాయి. రెండు boxes కి CSS width 220px ఉంటుంది. content-box box యొక్క మొత్తం బయట వెడల్పు 270px అవుతుంది; border-box box యొక్క మొత్తం బయట వెడల్పు 220px గానే ఉంటుంది.
Line-by-Line Explanation
ఈ selector box class ఉన్న రెండు div elements ను ఎంచుకుంటుంది.
ప్రతి box కి 220px width ఇస్తుంది. content-box లో ఇది content area width; border-box లో ఇది మొత్తం outer width.
Content చుట్టూ నాలుగు వైపులా 20px inner space ఇస్తుంది. content-box లో ఈ padding width కి అదనంగా చేరుతుంది.
Box చుట్టూ 5px solid border ఇస్తుంది. content-box లో ఈ border కూడా width కి అదనంగా చేరుతుంది.
Box బయట నాలుగు వైపులా 12px space ఇస్తుంది. ఇది box యొక్క width calculation లో భాగం కాదు; ఇతర elements నుండి దూరాన్ని సృష్టిస్తుంది.
content-box class ఉన్న మొదటి div ను ఎంచుకుంటుంది.
Width content area కి మాత్రమే వర్తించేలా చేస్తుంది. Padding మరియు border అదనంగా కలుస్తాయి.
border-box class ఉన్న రెండవ div ను ఎంచుకుంటుంది.
Width లో content, padding మరియు border అన్నీ కలిసే ఉండేలా చేస్తుంది. అందువల్ల outer width 220px గానే ఉంటుంది.
ఈ HTML element కి box మరియు content-box classes ఉన్నాయి. అందువల్ల మొదటి box content-box calculation ను ఉపయోగిస్తుంది.
ఈ HTML element కి box మరియు border-box classes ఉన్నాయి. అందువల్ల రెండవ box border-box calculation ను ఉపయోగిస్తుంది.
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 Box Sizing</title>
<style>
.card {
width: 260px;
padding: 24px;
border: 6px solid #16a34a;
margin: 16px;
background-color: #dcfce7;
}
.first-card {
box-sizing: content-box;
}
.second-card {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Try Box Sizing</h1>
<div class="card first-card">content-box card</div>
<div class="card second-card">border-box card</div>
</body>
</html>Practice
Practice: పై code లో card యొక్క మొత్తం బయట width 280px గానే ఉండేలా CSS ను మార్చండి. ప్రస్తుతం ఉన్న content-box ను సరైన box-sizing value తో మార్చండి.
Hint: .card selector లో box-sizing: border-box; ఉపయోగించండి. Width లో padding మరియు border కూడా లెక్కలోకి వస్తాయి.
Common Mistakes
width: 280px; ఇచ్చినందువల్ల box యొక్క మొత్తం బయట width ఎప్పుడూ 280px ఉంటుందని అనుకోవడం.
Default గా box-sizing విలువ content-box. కాబట్టి padding మరియు border అదనంగా చేరవచ్చు. మొత్తం width నియంత్రించడానికి box-sizing: border-box; ఉపయోగించండి.
box-sizing: border-box; ను padding లేదా border property లాగా width లేకుండా వ్రాయకుండా, తప్పుగా box-size: border-box; అని వ్రాయడం.
సరైన property పేరు box-sizing. పూర్తి declaration: box-sizing: border-box;
box-sizing ను ఒక element పై మార్చి, మరొక element పై అదే ప్రభావం వస్తుందని అనుకోవడం.
box-sizing ప్రతి element కి వర్తిస్తుంది. అవసరమైతే ప్రతి selector లో ఇవ్వండి లేదా అన్ని elements కోసం * { box-sizing: border-box; } rule ఉపయోగించండి.
margin కూడా width లో భాగమని అనుకోవడం.
box-sizing content, padding మరియు border లెక్కింపును ప్రభావితం చేస్తుంది. margin అనేది element బయట ఉన్న space; అది box width లో భాగం కాదు.
Interview Questions
CSS లో box-sizing property యొక్క ఉపయోగం ఏమిటి?
Answer: ఒక element యొక్క width మరియు height లెక్కలో content, padding మరియు border ఎలా కలవాలో box-sizing నిర్ణయిస్తుంది.
content-box మరియు border-box మధ్య తేడా ఏమిటి?
Answer: content-box లో width content area కి మాత్రమే ఉంటుంది; padding మరియు border అదనంగా చేరతాయి. border-box లో width లో content, padding మరియు border అన్నీ కలిసే ఉంటాయి.
box-sizing యొక్క default value ఏమిటి?
Answer: box-sizing యొక్క default value content-box.
ప్రాజెక్టుల్లో box-sizing: border-box; ఎందుకు ఎక్కువగా ఉపయోగిస్తారు?
Answer: Padding మరియు border వల్ల element ఊహించిన width కంటే పెద్దదవకుండా ఉండటానికి border-box ఉపయోగిస్తారు. Layout ను నియంత్రించడం సులభమవుతుంది.
Exam Questions
box-sizing: border-box; ఉన్న element కి width: 200px, padding: 20px, border: 5px ఉంటే మొత్తం outer width ఎంత?
Answer:
మొత్తం outer width 200px. Padding మరియు border ఆ 200px లోనే ఉంటాయి.
box-sizing: content-box; ఉన్న element కి width: 200px, padding: 20px, border: 5px ఉంటే మొత్తం outer width ఎంత?
Answer:
200 + 20 + 20 + 5 + 5 = 250px.
అన్ని elements కు border-box ఇవ్వడానికి సాధారణ CSS rule ఏమిటి?
Answer:
* { box-sizing: border-box; }
Quick Revision
- box-sizing width మరియు height లెక్కింపు విధానాన్ని నిర్ణయిస్తుంది.
- content-box default value.
- content-box లో padding మరియు border width కి అదనంగా చేరతాయి.
- border-box లో content, padding మరియు border అన్నీ ఇచ్చిన width లోనే ఉంటాయి.
- మొత్తం box size నియంత్రించడానికి box-sizing: border-box; ఉపయోగించండి.
- అన్ని elements కోసం * { box-sizing: border-box; } ఉపయోగించవచ్చు.