سی ایس ایس میں مارجن ٹاپ پراپرٹی کیا ہے؟

Sy Ays Ays My Marjn Ap Prapr Y Kya



' مارجن ٹاپ 'پراپرٹی ریسپانسیو لے آؤٹ بنانے اور ایچ ٹی ایم ایل عناصر کی پوزیشننگ میں ڈویلپرز کی بہت مدد کرتی ہے۔ 'مارجن ٹاپ' پراپرٹی کا استعمال HTML عناصر پر زیادہ کنٹرول فراہم کرتا ہے، بصری علیحدگی کا اضافہ کرتا ہے، اور بہتر جوابی ڈیزائن بنانے میں مدد کرتا ہے۔ یہ گائیڈ CSS میں عملی نفاذ کے ساتھ مارجن ٹاپ پراپرٹی کو ظاہر کرتا ہے۔

'مارجن ٹاپ' پراپرٹی کیا ہے؟

' مارجن ٹاپ HTML عناصر کے درمیان اضافی جگہ بنانے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔ اسے مثبت اور منفی دونوں اقدار کے ساتھ سیٹ کیا جا سکتا ہے۔ یہ اقدار ڈیزائن کی ضروریات کے مطابق سیٹ کی گئی ہیں اور HTML عناصر کے درمیان وقفہ کاری کو اوور لیپنگ کو روکنے اور ایڈجسٹ کرنے میں مدد کرتی ہیں۔





'مارجن ٹاپ' پراپرٹی کو مثبت قدر کے ساتھ کیسے استعمال کیا جائے؟

مثبت قدر کے ساتھ 'مارجن ٹاپ' پراپرٹی اوپر کی پوزیشن سے منتخب HTML عنصر کے مرکز کی طرف اضافی وقفہ کرتی ہے۔ فراہم کردہ قدر پکسلز، فیصد، ریم، یا عالمی قدروں جیسے آٹو، وراثت، غیر سیٹ، وغیرہ میں ہو سکتی ہے۔ بہتر سمجھنے کے لیے آئیے ایک مثال دیکھیں:



مثال: مثبت قدر کا استعمال



آئیے ایک HTML فائل فرض کریں جو ایک '

ٹیگ اور ڈمی ڈیٹا فراہم کرتا ہے۔ اگلا، تفویض کریں ' مثبت 'div' عنصر کی کلاس کی قدر:



< جسم >
< div کلاس = 'مثبت' >
< ص > مثبت قدر کے ساتھ مارجن ٹاپ تفویض کیا گیا ہے۔ ص >
div >
جسم >

ایچ ٹی ایم ایل ڈھانچہ بنانے کے بعد، سی ایس ایس کی خصوصیات کو ' مثبت کلاس:



< انداز >
.مثبت {
چوڑائی: 300px؛
اونچائی: 200px؛
پس منظر کا رنگ: جنگل کا سبز؛
فونٹ سائز: 20px؛
رنگ: #fff
مارجن ٹاپ: 50px؛
}
انداز >

مندرجہ بالا کوڈ کے ٹکڑوں میں:

  • سب سے پہلے، 'کی اقدار مقرر کریں 300px 'اور' 200px 'سی ایس ایس کو' چوڑائی 'اور' اونچائی 'خصوصیات، بالترتیب.
  • اگلا، ' پس منظر کا رنگ '،' حرف کا سائز '، اور ' رنگ CSS کی خصوصیات کو بہتر تصور کے مقاصد کے لیے استعمال کیا جاتا ہے۔
  • آخر میں، '50px' قدر 'کو فراہم کی جاتی ہے مارجن ٹاپ 'اضافی جگہ شامل کرنے کے لئے پراپرٹی۔

مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، ویب صفحہ اس طرح نظر آتا ہے:

مندرجہ بالا gif ویب پیج پر مارجن ٹاپ پراپرٹی کی قدر سیٹ کرنے کے اثر کو واضح کرتا ہے۔

'مارجن ٹاپ' پراپرٹی کو منفی قدر کے ساتھ کیسے استعمال کیا جائے؟

' مارجن ٹاپ ” منفی قدر والی جائیداد مرکز کے بالمقابل یا صفحہ کے باہر کی طرف منتخب کردہ HTML عنصر کی نسبت اضافی وقفہ کاری سیٹ کرتی ہے۔ یہ زیادہ تر اوورلیپنگ اثرات پیدا کرنے یا HTML عنصر کی پوزیشننگ میں استعمال ہوتا ہے۔

آئیے بہتر تفہیم کے لیے ایک مثال کے ذریعے چلتے ہیں۔

مثال: منفی قدر کا استعمال

آئیے ایک HTML فائل فرض کریں جو ایک '

ٹیگ اور ڈمی ڈیٹا فراہم کرتا ہے۔ اگلا، تفویض کریں ' منفی 'div' عنصر کی کلاس کی قدر:

< انداز >
منفی {
رنگ: سفید؛
متن سیدھ: مرکز؛
پس منظر کا رنگ: سرخ ;
مارجن ٹاپ: -30px ;
پیڈنگ: 30px؛
اونچائی: 100px؛
}
انداز >
< جسم >
< div کلاس = 'منفی' >
منفی قدر تفویض کی گئی ہے۔ کے لیے مارجن ٹاپ پراپرٹی
div >
جسم >

اوپر بیان کردہ کوڈ کے ٹکڑوں کی تفصیل ذیل میں بیان کی گئی ہے:

  • سب سے پہلے، ' منفی 'کلاس کے اندر منتخب کیا گیا ہے'