x

تنسيق القوائم (Lists) والروابط (Links)

كيف تضبط المسافات بين عناصر القائمة باستخدام margin أو line-height ؟

نظري

تُعد الهوامش (Margins) ومسافة الأسطر (line-height) ضرورية لضبط المسافات بين عناصر القائمة، وذلك لتعزيز سهولة القراءة والجاذبية البصرية (visual appeal).

أولاً، لنبدأ بضبط المسافات بين عناصر القائمة (list items) باستخدام الهوامش (margins) !

يمكن استخدام الهوامش (margins) لإنشاء مسافات بين عناصر القائمة (list items) من خلال تطبيق خصائص الهامش (margin properties) على عناصر li. وتتيح لك هذه الطريقة التحكم في المسافة المحيطة بخارج كل عنصر من عناصر القائمة، مما يؤدي فعلياً إلى زيادة أو تقليل الفراغ الفاصل بينها.

لنلقِ نظرةً على مثالٍ لقائمةٍ غير مُرتَّبةٍ (unordered list) تحتوي على ثلاثة عناصر. 


<ul>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>

معاينة:

بشكل افتراضي، لن تُطبِّق لغة HTML مسافات كبيرة بين عناصر القائمة (list items).

لإضافة بعض المسافة أسفل كل عنصر من عناصر القائمة، يمكنك استخدام الخاصية margin-bottom على النحو التالي:

index.html


<link rel="stylesheet" href="styles.css">

<ul>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>

styles.css


li {
 margin-bottom: 40px;
}

معاينة:

في هذا المثال، سيتم تطبيق هامش (margin) بمقدار 40px أسفل كل عنصر من عناصر القائمة داخل القائمة غير المرتبة.

هناك طريقة أخرى للمباعدة بين عناصر القائمة، وهي استخدام الخاصية line-height.

تُعدل الخاصية line-height المسافة العمودية (vertical spacing) بين أسطر النص داخل عنصر قائمة واحد (single list item).

على الرغم من أن هذا الأمر يؤثر في المقام الأول على المسافة بين أسطر النص داخل كل عنصر، إلا أنه قد يؤثر أيضاً بشكل غير مباشر على المسافة الإجمالية بين عناصر القائمة إذا كانت هذه العناصر تحتوي على سطر نصي واحد فقط.

إذا كانت عناصر القائمة تحتوي على أسطر نصية متعددة، فإن خاصية "ارتفاع السطر" line-height ستؤثر على المسافة بين تلك الأسطر، لكنها لا تعدّل بشكل مباشر المسافة بين عناصر القائمة المنفصلة بحد ذاتها (list items themselves).

للتحكم في المسافات بين عناصر القائمة الفردية، يمكنك استخدام خصائص الهامش margin أو الهامش الداخلي padding بدلاً من ذلك.

باستخدام القائمة غير المرتبة نفسها المذكورة سابقاً، إليك مثال على تطبيق خاصية ارتفاع السطر line-height على عناصر القائمة:

index.html


<link rel="stylesheet" href="styles.css">

<ul>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>

styles.css


li {
 line-height: 2;
}

معاينة:

في هذا المثال، تحدد الخاصية line-height ارتفاع السطر ليكون ضعف حجم الخط، مما يوفر مساحة عمودية (vertical space) أكبر داخل كل عنصر من عناصر القائمة (each list item).

أسئلة :

ما هي خاصية CSS التي ستستخدمها لإنشاء مسافة بين عناصر القائمة عن طريق ضبط المساحة الخارجية لكل عنصر li ؟

1. padding ❌

2. line-height ❌

3. margin ✅

4. border ❌


بالنظر إلى قاعدة CSS التالية: li { margin-bottom: 15px; }، ما هو التأثير الذي تحدثه هذه القاعدة على عناصر القائمة؟

1. يضيف مسافة 15px داخل كل عنصر من عناصر القائمة. ❌

2. يضيف مسافة 15px بين المحتوى وحدود كل عنصر من عناصر القائمة. ❌

3. يضيف مسافة 15px أسفل كل عنصر من عناصر القائمة. ✅

4. يضيف مسافة 15px أعلى كل عنصر من عناصر القائمة. ❌


ما الذي تتحكم فيه خاصية line-height في CSS؟

1. عرض width المحتوى. ❌

2. المساحة الواقعة داخل حدود العنصر border. ❌

3. المسافة العمودية (vertical spacing) بين أسطر النص داخل العنصر. ✅

4. المساحة الواقعة خارج حدود العنصر border. ❌