آموزش فاصله گذاری متن در CSS

در CSS چند ویژگی برای کنترل فاصله‌گذاری متن وجود دارد. این ویژگی‌ها به شما امکان می‌دهند ظاهر متن را از نظر تورفتگی، فاصله بین حروف، فاصله بین خطوط، فاصله بین کلمات و نحوه مدیریت فاصله‌های خالی تنظیم کنید.

ویژگی‌های اصلی عبارت‌اند از:

• text-indent → تورفتگی خط اول متن
• letter-spacing → فاصله بین کاراکترها
• line-height → فاصله بین خطوط
• word-spacing → فاصله بین کلمات
• white-space → نحوه مدیریت فاصله‌های خالی

۱. تورفتگی خط اول (text-indent)

ویژگی text-indent میزان تورفتگی خط اول یک بلوک متن را مشخص می‌کند.
 نکته: مقادیر منفی مجاز هستند و باعث می‌شوند خط اول به سمت چپ حرکت کند.

p {
  text-indent: 50px;
}

۲. فاصله بین کاراکترها (letter-spacing)

ویژگی letter-spacing فاصله بین کاراکترهای متن را مشخص می‌کند.
 نکته: مقادیر منفی مجاز هستند و باعث کاهش فاصله بین حروف می‌شوند.

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

۳. فاصله بین خطوط (line-height)

ویژگی line-height فاصله بین خطوط متن را مشخص می‌کند.
 نکته: مقادیر منفی مجاز نیستند.

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

۴. فاصله بین کلمات (word-spacing)

ویژگی word-spacing فاصله بین کلمات متن را مشخص می‌کند.
 نکته: مقادیر منفی مجاز هستند و باعث کاهش فاصله بین کلمات می‌شوند.

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

ویژگی white-space مشخص می‌کند فاصله‌های خالی داخل یک عنصر چگونه مدیریت شوند. مقادیر آن:

• normal → پیش‌فرض، فاصله‌ها به‌طور معمول مدیریت می‌شوند.
• nowrap → متن در یک خط باقی می‌ماند و شکسته نمی‌شود.
• pre → فاصله‌ها همان‌طور که در کد نوشته شده‌اند نمایش داده می‌شوند.
• pre-line → فاصله‌ها حفظ می‌شوند اما خطوط شکسته می‌شوند.
• pre-wrap → فاصله‌ها حفظ می‌شوند و متن در صورت نیاز شکسته می‌شود.

p {
  white-space: nowrap;
}