حجم المسافة بين الأحرف CSS

هوامش النص

text-indent يُستخدم هذا الخصائص لتحديد الهوامش الأولى للنص:

مثال

p {
  text-indent: 50px;
}

جرب بنفسك

مسافة الحروف

letter-spacing يُستخدم هذا الخصائص لتحديد المسافة بين الأحرف في النص.

التوضيح التالي يظهر كيفية زيادة أو تقليل المسافة بين الأحرف:

مثال

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

جرب بنفسك

ارتفاع السطر

line-height يستخدم هذا الخصائص لتحديد مسافة بين السطور:

مثال

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

جرب بنفسك

مسافة الكلمة

word-spacing يستخدم هذا الخصائص لتحديد مسافة بين الكلمات في النص.

في المثال التالي، سيتم عرض كيفية زيادة أو تقليل مسافة بين الكلمات:

مثال

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

جرب بنفسك

الفراغ

white-space يحدد كيفية معالجة الفراغ الداخلي للعنصر.

هذا المثال يوضح كيفية تعطيل تنقل النص داخل العنصر:

مثال

p {
  white-space: nowrap;
}

جرب بنفسك