سيعلمك هذا الدليل الإجراء اللازم لإنشاء مسافة بين رابطين.
هيا بنا نبدأ!
كيف تترك مسافة بين رابطين في HTML و CSS؟
لإعطاء مسافة بين رابطين ، قم أولاً وقبل كل شيء بإضافة الروابط المطلوبة في ملف HTML.
الخطوة الأولى: إضافة روابط بتنسيق HTML
في HTML ، سننشئ حاوية باستخدام علامة
لغة البرمجة
< شعبة >< أ href = 'https://linuxhint.com/create-html-file/' > كيفية إنشاء ملف HTML؟ < / أ >
< أ href = 'https://linuxhint.com/edit-html-file/' > كيفية تحرير ملف HTML؟ < / أ >
< / شعبة >
توضح الصورة التالية أنه تم إضافة الروابط بنجاح:
الخطوة 2: نمط Div & Link
في هذه الخطوة ، حدد نمط div والرابط باستخدام ' شعبة 'في CSS. سنقوم بضبط المساحة المتروكة على ' 40 بكسل 'وتعيين حجم خط الروابط على أنه' أكبر '، يتم تعيين ارتفاع div على' 150 بكسل 'واستخدم خاصية الخلفية واضبط لون عنصر div على أنه' أسود '. بعد ذلك ، اضبط عرض الحد كـ ' 5 بكسل '، النمط كـ' متقطع 'ولون كـ' RGB (251 ، 255 ، 0) '.
CSS
شعبة {حشوة : 40 بكسل ؛
حجم الخط : أكبر ؛
ارتفاع : 150 بكسل ؛
معرفتي : أسود ؛
الحدود : 5 بكسل متقطع RGB ( 251 و 255 و 0 ) ؛
}
باستخدام الكود أعلاه ، يتم الحصول على الإخراج التالي. كما ترى ، تم تنسيق كل من div والروابط:
الخطوة 3: امنح مسافة بين رابطين أفقيًا
يمكننا إعطاء مسافة بين رابطين أفقيًا باستخدام HTML و CSS. هنا ، سنشرح كلتا الطريقتين واحدة تلو الأخرى.
الطريقة الأولى: استخدام HTML
لتوفير مسافة بين الروابط دون كتابة أي CSS خارجي ، يمكنك استخدام ' ونبسب 'في HTML حيث تريد إنشاء مساحة. ' ونبسب 'تعني مساحة غير قابلة للكسر. في ملف HTML ، إضافة & nbsp تعني مسافة واحدة. إذا كنت ترغب في توفير مساحة أكبر ، فلا يفضل إضافة & nbsp يدويًا وفقًا لعدد المساحات المطلوبة.
دعنا ننتقل إلى المثال لفهم المفهوم المذكور!
مثال
هنا ، نكتب أربع مرات ' ونبسب لإنشاء مساحة بعد الرابط الأول بحيث يظهر الرابط الثاني بعد الفراغات الأربعة.
لغة البرمجة
< شعبة >< أ href = 'https://linuxhint.com/create-html-file/' > كيفية إنشاء ملف HTML؟ < / أ > & nbsp & nbsp & nbsp & nbsp
كيفية تحرير ملف HTML؟
كما ترى ، يتم إنشاء مساحة على الجانب الأيمن من الارتباط الأول:
الطريقة الثانية: استخدام CSS
في CSS ، سنستخدم ' الهامش الأيمن 'لإعطاء مسافة بين رابطين. ال ' الهامش الأيمن 'لإضافة مساحة من الجانب الأيمن للعنصر. يمكنك أيضًا تحديد القيم السالبة لها.
بناء الجملة
فيما يلي بناء جملة خاصية margin-right:
الهامش الأيمن : القيمةفي مكان ' القيمة '، اضبط الهامش من الجانب الأيمن للعنصر. دعونا نكمل المثال.
مثال
هنا ، سوف نستخدم ' أ 'للوصول إلى الرابط الذي أنشأناه في HTML. بعد ذلك ، قم بتعيين قيمة خاصية margin-right على أنها ' 50 بكسل ':
أ {الهامش الأيمن : 50 بكسل ؛
}
يتم إنشاء الفضاء من الجانب الأيمن للرابط الأول ، والذي يمكن رؤيته أدناه:
الخطوة 4: اترك مسافة بين رابطين عموديًا
لإعطاء مسافة رأسية بين رابطين ، قم أولاً بمحاذاة الروابط في شكل عمودي. سيتم ذلك باستخدام ' الكتلة 'قيمة' عرض 'ثم استخدام' ارتفاع خط ”لإعطاء مسافة بين سطري ارتباط.
مثال:
هنا ، سنقوم بتعيين قيمة خاصية العرض على أنها ' الكتلة 'لمحاذاة الروابط عموديًا. بعد ذلك ، امنح المسافة بين رابطين عن طريق تعيين قيمة خاصية ارتفاع الخط على النحو ' 80 بكسل ':
أ {عرض : الكتلة ؛
ارتفاع خط : 80 بكسل ؛
}
كما ترى ، يتم إنشاء المساحة باستخدام خاصية line-height:
هذا هو! لقد شرحنا طريقة إعطاء مسافة بين رابطين في HTML و CSS.
استنتاج
ال ' ونبسب '،' الهامش الأيمن '، و ' ارتفاع خط تستخدم خصائص CSS لإعطاء مسافة أفقية ورأسية بين رابطين. باستخدام هذا ، يمكنك ضبط المساحة من الجانبين الأيمن والأيسر للروابط. في هذه المقالة ، شرحنا الإجراء الخاص بإعطاء مسافة بين رابطين باستخدام طريقتين مختلفتين وقدمنا أمثلة ذات صلة.