CSSలో, Box Model వెబ్పేజీలో ఒక మూలకం ఎలా నిర్మాణాత్మకంగా మరియు ఉంచబడిందో నిర్ణయించడానికి ఇది ఒక ముఖ్యమైన అంశం. Padding ఇది కంటెంట్,, Border మరియు వంటి ప్రాథమిక భాగాలను కలిగి ఉంటుంది Margin.
Content
Content వచనం, చిత్రాలు లేదా వీడియోల వంటి మూలకం యొక్క వాస్తవ కంటెంట్ని కలిగి ఉన్న ప్రాంతం.
కంటెంట్ పరిమాణాన్ని నిర్వచించడానికి, మేము width మరియు height లక్షణాలను ఉపయోగిస్తాము.
Padding
Padding కంటెంట్ చుట్టూ ఖాళీ, కంటెంట్ మరియు మూలకం మధ్య అంతరాన్ని సృష్టిస్తుంది border.
విలువలను పేర్కొనడానికి padding, మేము padding-top, padding-right,padding-bottom మరియు లక్షణాలను ఉపయోగిస్తాము. padding-left
Border
ఇది Border మూలకం చుట్టూ ఉన్న రూపురేఖలు, కంటెంట్ మరియు పరిసర ప్రాంతాల మధ్య స్పష్టమైన సరిహద్దును సృష్టిస్తుంది.
ఫార్మాట్ చేయడానికి border, మేము border-width, border-style, మరియు border-color లక్షణాలను ఉపయోగిస్తాము.
Margin
Margin మూలకం వెలుపల ఉన్న స్థలం border, ఇతర మూలకాల మధ్య అంతరాన్ని సృష్టిస్తుంది.
విలువలను నిర్వచించడానికి margin, మేము margin-top, margin-right, మరియు లక్షణాలను ఉపయోగిస్తాము. margin-bottom margin-left
ఇన్ CSS ని ఉపయోగించడం ద్వారా Box Model, మేము దాని భాగాల విలువలను సవరించడం ద్వారా మూలకం యొక్క పరిమాణం మరియు స్థానాన్ని అనుకూలీకరించవచ్చు.
ఉదాహరణ:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
పై ఉదాహరణలో, తరగతితో ఉన్న మూలకం .box 200px వెడల్పు మరియు 100px ఎత్తును కలిగి ఉంటుంది. ఇది 20px, 1px మందంతో padding నలుపు మరియు 10px. border margin
ఈ విలువలను సర్దుబాటు చేయడం ద్వారా, మీరు మీ వెబ్పేజీలో విభిన్న పరిమాణాలు మరియు అంతరాలతో మూలకాలను సృష్టించవచ్చు. ను ఉపయోగించడం ద్వారా Box Model, మీ ఇంటర్ఫేస్లోని మూలకాల స్థానాలు, పరిమాణం మరియు అంతరంపై మీకు నియంత్రణ ఉంటుంది.