✅ CSS Box Model جي وضاحت سنڌي ۾: Web Development Course Class 25
CSS Box Model هڪ اهڙو طريقو آهي جنهن سان HTML جو هر عنصر (Element) صفحي تي جڳهه والاري ٿو.
هر element هڪ باڪس (Box) وانگر هوندو آهي، جنهن جا چار اهم حصا ٿين ٿا:
- Margin
- Border
- Padding
- Content
📦 1. Margin (مارجن) ڇا آهي؟ Web Development Course Class 25
- مارجن اهو خالي جاءِ (Space) آهي جيڪو هڪ عنصر جي ٻاهران ٻين عنصرن سان فاصلہ پيدا ڪري ٿو.
- مارجن عنصر کان ٻاهر ٿيندو آهي.
- مثال: جيڪڏهن توهان چاھيو ته ٻه ڊويزن (div) هڪ ٻئي کان پري ٿين ته مارجن وڌايو.
تصور ڪريو: جيئن اوهان هڪ باڪس کي ٽيبل تي رکيو آهي، ۽ ان باڪس جي چوڌاري خالي جاءِ مارجن هوندي آهي.
📦 2. Border (بارڊر) ڇا آهي؟ Web Development Course Class 25
- بارڊر اهو لائين يا حد (Boundary) آهي جيڪا ڪنهن عنصر جي پڊنگ ۽ مارجن جي وچ ۾ ٿيندي آهي.
- بارڊر کي رنگ، ٿولهه (Thickness) ۽ ڊيزائن ڏئي سگهجي ٿو.
- اهو عنصر کي خوبصورت، محفوظ ۽ نمايان ڪرڻ لاءِ استعمال ٿئي ٿو.
تصور ڪريو: جيئن هڪ باڪس جي ڀرسان ڪا پٽي يا فريم لڳل هوندي آهي.
📦 3. Padding (پيڊنگ) ڇا آهي؟ Web Development Course Class 25
- پيڊنگ اهو اندروني خالي جاءِ آهي جيڪو ڪنٽينٽ (لکڻائي يا تصوير) ۽ بارڊر جي وچ ۾ ٿيندو آهي.
- پيڊنگ ڪنٽينٽ کي بارڊر کان محفوظ فاصلي تي رکندي آهي.
وڌيڪ پيڊنگ ڏيڻ سان اندر جو متن يا تصوير بارڊر کان پري ٿي بيهندو.
تصور ڪريو: جيئن اوهان ڪتاب جي اندر صفحي جي ڪنڊن کان لکت کي ٿورو اندر رکندا آهيو.
🎯 مکيه فرق: Web Development Course Class 25
ڇا ڪندو آهي؟
Margin
ٻاهران خالي جاءِ ٺاهي ٿو (element جي ٻاهرين اسپيس).
Border
عنصر کي فريم ڏئي ٿو (حد بندي ڪري ٿو).
Padding
اندر خالي جاءِ ڏيندو آهي (لکڻائي ۽ بارڊر جي وچ ۾).
🌟 ياد رکو:
مارجن ٻاهرين اسپيس آهي.
بارڊر ٻاهرين لائن آهي.
پيڊنگ اندروني حفاظتي جاءِ آهي.
۽ سڀني جو اثر Element جي سائيز ۽ Layout تي ٿيندو آهي.
🎓 هتي هڪ آسان مثال:<div style="margin: 20px; border: 5px solid blue; padding: 15px;"> هي منهنجو مواد آهي. </div>
Margin: 20px ٻاهران فاصلہ.
Border: 5px ٿلهو، نيرو رنگ.
Padding: 15px اندر کان فاصلہ.
1️⃣ Margin وارو Example: Web Development Course Class 25<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin Example</title> <style> .margin-example { margin: 50px; background-color: #f0f8ff; text-align: center; font-size: 20px; } </style> </head> <body> <div class="margin-example"> Bilqees Razia Laghari Welfare Trust </div> </body> </html>
✅ (هن مثال ۾ ٻاهران خالي جاءِ وڌايل آهي.)
2️⃣ Padding وارو Example:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Padding Example</title> <style> .padding-example { padding: 30px; background-color: #ffe4e1; text-align: center; font-size: 20px; } </style> </head> <body> <div class="padding-example"> Bilqees Razia Laghari Welfare Trust </div> </body> </html>
✅ (هن مثال ۾ اندر خالي جاءِ وڌايل آهي.)
3️⃣ Border وارو Example:
“`html.border-example {
border: 4px solid green;
background-color: #f5fffa;
text-align: center;
font-size: 20px;
padding: 20px;
}
Bilqees Razia Laghari Welfare Trust
“`
✅ (هن مثال ۾ باڪس جي چوڌاري بارڊر لڳايو ويو آهي.)
