اذهب إلى المحتوى
  • 0

ممكن الفرق بين line-height , text-align مع التوضيح

Eslam Ahmed Soliman Nafea

السؤال

Recommended Posts

  • 0

text-align : تستخدم هذه الخاصية لمحازاة النص أفقيا داخل العنصر أو محازاة العناصر السطرية مثل span و img وa وتأخذ عدة قيم مثل center - left - right.
حالة كانت قيمتها right ستكون المحازاة للنص يمينيا ، وإذا كانت left تكون المحازاة للنص يسارا، وإذا كانت center تكون المحازاة في منتصف العنصر لاحظ هذا الكود والقيمة التي ذكرتها

<div>
   <p style="text-align: right; background-color: blue;">النص في اليمين</p>
   <p style="text-align: center; background-color: yellow;">النص في المنتصف</p>
   <p style="text-align: left; background-color: red;">النص في اليسار</p>
</div>

تكون النتيجة له كالأتي
Screenshot2024-11-02213314.thumb.png.7ae47608d1671472aac972ccf58e7655.png
line-height: تستخدم هذه الخاصية للتحكم في المسافة العمودية بين أسطر النص داخل عنصر معين.
وتأخذ قيمة عن طريق وحدات نسبية من حجم الخط في هذا العنصر في حالة مثلا كانت القيمة له 1.5 وحجم الخط الافتراضي للعنصر 16px لذلك ستكون قيمة الـine-height هي 24px ويمكن كتابة القيمة بوحدة الـ pixel لا مشكلة ولكن يفضل أن تكون نسبية لاحظ الكود

<div>
  <p style="background-color: rgb(45, 205, 233); line-height: 1.5;">Lorem ipsum dolor sit amet consectetur,
      adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p>
  <p style="background-color: rgb(233, 167, 45); line-height: 2;">Lorem ipsum dolor sit amet consectetur,
      adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p>
  <p style="background-color: rgb(253, 107, 155); line-height: 2.5;">Lorem ipsum dolor sit amet consectetur,
      adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p>
</div>

تكون النتيجة له كالأتي لاحظ المسافات بين الأسطرScreenshot2024-11-02214732.thumb.png.86f2e65da8bc24e3bc6d62dc25c4de45.png

وإذا قمت بتغير حجم الخط للعنصر وكنت تستخدم القيمةللـ line-height بشكل نسبي ستتغيير بالطبع قيمة الـ line-height.
للمزيد حول هاتين الخاصيتين يمكنك الإطلاع عليهم في موسوعة حسوب
https://wiki.hsoub.com/CSS/text-align
 https://wiki.hsoub.com/CSS/line-height

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...