CSS میں استعمال کرنا Box Model- ساخت اور پوزیشننگ

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

 

in CSS کا استعمال کرتے ہوئے Box Model ، ہم کسی عنصر کے اجزاء کی قدروں میں ترمیم کرکے اس کے سائز اور پوزیشن کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

مثال:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}  

مندرجہ بالا مثال میں، کلاس والے عنصر .box کی چوڑائی 200px اور اونچائی 100px ہے۔ اس میں 20px ہے padding ، ایک سیاہ ہے border جس کی موٹائی 1px ہے، اور ایک 10px ہے margin ۔

 

ان اقدار کو ایڈجسٹ کرکے، آپ اپنے ویب پیج پر مختلف سائز اور وقفہ کے ساتھ عناصر بنا سکتے ہیں۔ کے استعمال کے ذریعے Box Model ، آپ کو اپنے انٹرفیس میں عناصر کی پوزیشننگ، سائز، اور وقفہ کاری پر کنٹرول حاصل ہوتا ہے۔