یہ دستورالعمل آپ کو دو لنکس کے درمیان جگہ بنانے کا طریقہ سکھائے گا۔
آو شروع کریں!
HTML اور CSS میں دو لنکس کے درمیان جگہ کیسے دی جائے؟
دو لنکس کے درمیان جگہ دینے کے لیے سب سے پہلے HTML فائل میں مطلوبہ لنکس شامل کریں۔
مرحلہ 1: HTML میں لنکس شامل کریں۔
HTML میں، ہم
ایچ ٹی ایم ایل
< div >< a href = 'https://linuxhint.com/create-html-file/' > HTML فائل کیسے بنائیں؟ < / a >
< a href = 'https://linuxhint.com/edit-html-file/' > HTML فائل میں ترمیم کیسے کریں؟ < / a >
< / div >
مندرجہ ذیل تصویر سے پتہ چلتا ہے کہ لنکس کامیابی کے ساتھ شامل کیے گئے ہیں:
مرحلہ 2: Div اور لنک کو اسٹائل کریں۔
اس مرحلے میں، div کو اسٹائل کریں اور 'کا استعمال کرتے ہوئے لنک بنائیں div 'سی ایس ایس میں۔ ہم پیڈنگ کو ایڈجسٹ کریں گے ' 40px 'اور لنکس کا فونٹ سائز سیٹ کریں' بڑا '، div کی اونچائی ' کے طور پر مقرر کی گئی ہے 150px 'اور بیک گراؤنڈ پراپرٹی کا استعمال کریں اور div کا رنگ سیٹ کریں' سیاہ ' اس کے بعد، سرحد کی چوڑائی کو 'کے طور پر ایڈجسٹ کریں 5px '، سٹائل کے طور پر ' ڈیشڈ 'اور رنگ' کے طور پر rgb(251, 255, 0) '
سی ایس ایس
div {بھرتی : 40px ;
حرف کا سائز : بڑا ;
اونچائی : 150px ;
پس منظر : سیاہ ;
سرحد : 5px ڈیشڈ آر جی بی ( 251 , 255 , 0 ) ;
}
مندرجہ بالا کوڈ کا استعمال کرتے ہوئے، مندرجہ ذیل آؤٹ پٹ حاصل کیا جاتا ہے. جیسا کہ آپ دیکھ سکتے ہیں، div اور لنکس دونوں کو اسٹائل کیا گیا ہے:
مرحلہ 3: دو لنکس کے درمیان افقی طور پر جگہ دیں۔
ہم ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرکے دو لنکس کے درمیان افقی طور پر جگہ دے سکتے ہیں۔ یہاں، ہم ایک ایک کرکے دونوں طریقوں کی وضاحت کریں گے۔
طریقہ 1: HTML کا استعمال
کسی بھی بیرونی سی ایس ایس کو لکھے بغیر لنکس کے درمیان جگہ دینے کے لیے، آپ استعمال کر سکتے ہیں۔ HTML میں جہاں آپ جگہ بنانا چاہتے ہیں۔ ' ” کا مطلب ہے نان توڑنے والی جگہ۔ HTML فائل میں، ایک شامل کرنے کا مطلب ہے ایک جگہ۔ اگر آپ مزید جگہ دینا چاہتے ہیں تو مطلوبہ جگہوں کے مطابق کو دستی طور پر شامل کرنا بہتر نہیں ہے۔
آئیے بیان کردہ تصور کو سمجھنے کے لیے مثال کی طرف چلتے ہیں!
مثال
یہاں ہم چار بار لکھیں گے ”پہلے لنک کے بعد اسپیس بنانا اس طرح کہ دوسرا لنک چار اسپیس کے بعد ظاہر ہو۔
ایچ ٹی ایم ایل
< div >< a href = 'https://linuxhint.com/create-html-file/' > HTML فائل کیسے بنائیں؟ < / a >
HTML فائل میں کیسے ترمیم کریں؟
جیسا کہ آپ دیکھ سکتے ہیں، پہلے لنک کے دائیں جانب جگہ بنائی گئی ہے۔
طریقہ 2: CSS کا استعمال
سی ایس ایس میں، ہم استعمال کریں گے ' مارجن-دائیں دو لنکس کے درمیان جگہ دینے کے لیے پراپرٹی۔ ' مارجن-دائیں ' پراپرٹی کو عنصر کے دائیں جانب سے جگہ شامل کرنے کے لیے استعمال کیا جاتا ہے۔ آپ اس کے لیے منفی اقدار بھی مرتب کر سکتے ہیں۔
نحو
مارجن رائٹ پراپرٹی کا نحو ذیل میں دیا گیا ہے:
مارجن-دائیں : قدرکی جگہ ' قدر ”، عنصر کے دائیں جانب سے مارجن سیٹ کریں۔ آئیے مثال کو جاری رکھیں۔
مثال
یہاں، ہم استعمال کریں گے ' a ہم نے HTML میں جو لنک بنایا ہے اس تک رسائی حاصل کرنے کے لیے۔ اگلا، مارجن رائٹ پراپرٹی کی قدر کو ' کے طور پر سیٹ کریں 50px ”:
a {مارجن-دائیں : 50px ;
}
پہلے لنک کے دائیں جانب سے جگہ بنائی گئی ہے، جسے نیچے دیکھا جا سکتا ہے:
مرحلہ 4: عمودی طور پر دو لنکس کے درمیان جگہ دیں۔
دو لنکس کے درمیان عمودی جگہ دینے کے لیے، پہلے لنکس کو عمودی شکل میں سیدھ کریں۔ یہ استعمال کرکے کیا جائے گا ' بلاک 'کی قدر' ڈسپلے 'پراپرٹی اور پھر استعمال کرتے ہوئے' لکیر کی اونچائی دو لنک لائنوں کے درمیان جگہ دینے کے لیے پراپرٹی۔
مثال:
یہاں، ہم ڈسپلے پراپرٹی کی ویلیو سیٹ کریں گے ' بلاک لنکس کو عمودی طور پر سیدھا کرنے کے لیے۔ پھر، لائن کی اونچائی کی خاصیت کی قدر کو ' کے طور پر مقرر کرکے دو لنکس کے درمیان جگہ دیں۔ 80px ”:
a {ڈسپلے : بلاک ;
لکیر کی اونچائی : 80px ;
}
جیسا کہ آپ دیکھ سکتے ہیں، جگہ لائن کی اونچائی کی خاصیت کا استعمال کرتے ہوئے بنائی گئی ہے:
یہی ہے! ہم نے HTML اور CSS میں دو لنکس کے درمیان جگہ دینے کا طریقہ بتایا ہے۔
نتیجہ
' '،' مارجن-دائیں '، اور ' لکیر کی اونچائی CSS کی خصوصیات دو لنکس کے درمیان افقی اور عمودی جگہ دینے کے لیے استعمال ہوتی ہیں۔ اس کا استعمال کرتے ہوئے، آپ لنکس کے دائیں اور بائیں جانب سے جگہ کو ایڈجسٹ کر سکتے ہیں۔ اس مضمون میں، ہم نے دو مختلف طریقوں کا استعمال کرتے ہوئے دو لنکس کے درمیان جگہ دینے کے طریقہ کار کی وضاحت کی ہے اور متعلقہ مثالیں فراہم کی ہیں۔