در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد تعیین فاصله حروف و کلمات با استفاده از ویژگی های CSS صحبت خواهیم کرد.

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

ویژگی letter-spacing

از این ویژگی به منظور تنظیم فاصله بین حروف یک کلمه استفاده می شود.مقادیری که این ویژگی می پذیرد را در کد زیر مشاهده می کنید که هر کدام را جداگانه بررسی خواهیم کرد.

letter-spacing: normal | مقادیر طولی | inherit

مقدار normal

این مقدار،مقدار اولیه این ویژگی می باشد و باعث می شود که مرورگر با توجه به فونت مورد نظر فاصله بین حروف را مشخص کند.

مقادیر طولی

با استفاده از واحدهای طولی می توان فاصله بین حروف را تعیین کرد.همچنین برای این ویژگی می توانیم از مقادیر منفی نیز استفاده کنیم.مثال هایی از نحوه استفاده از مقادیر طولی برای این ویژگی را در کد زیر مشاهده می کنید.

letter-spacing: 1em;
letter-spacing: .5rem;
letter-spacing: 5px;
letter-spacing: -2px;

مقدار inherit

با استفاده از این مقدار می توانیم تعیین کنیم که عنصر،مقدار این ویژگی را از والد خود به ارث ببرد.

کاربرد دیگر ویژگی letter-spacing

زمانی که چند عنصر را با استفاده از ویژگی display و مقدار inline-block در کنار هم قرار می دهیم یک فاصله چهار پیکسلی بین عناصر بوجود خواهد آمد.

یکی از راه های حل این مسئله این است که مقدار ویژگی letter-spacing را برای عنصر والد منفی چهار پیکسل تعیین کنیم مانند آنچه که در قطعه کد زیر مشاهده می کنید.

.parent {
  letter-spacing: -4px;
}
.parent .child {
  display: inline-block;
}

در دموی زیر مثال هایی از نحوه استفاده از ویژگی letter-spacing را مشاهده می کنید.

 

 

ویژگی word-spacing

با استفاده از ویژگی word-spacing می توان فاصله بین کلمات را در متن یک عنصر کنترل کرد.

اگر عددی را برای این ویژگی تعیین کنید، با توجه به مقداری که برایش تعیین کرده اید،فاصله کلمات موجود در عنصر از همان مقدار پیشفرضی که دارند شروع به زیاد یا کم شدن می کنند.به عنوان مثال اگر مقدار پیش فرض فاصله بین کلمات 2 پیکسل باشد و شما مقدار این ویژگی را 3 پیکسل تعیین کرده باشید،فاصله بین کلمات 5 پیکسل خواهد شد.

این ویژگی فقط مخصوص متن و کلمات نمی باشد بلکه با استفاده از آن می توان فاصله بین عناصر inline و inline-block داخل یک عنصر را نیز کنترل کرد.

مقادیری که برای این ویژگی می توانید وارد کنید عبارتند از :

word-spacing: normal | مقادیر طولی | inherit

مقدار normal

این مقدار،مقدار اولیه این ویژگی می باشد و باعث می شود که مرورگر با توجه به فونت مورد نظر فاصله بین کلمات را مشخص کند.

مقادیر طولی

با استفاده از واحدهای طولی می توان فاصله بین کلمات را تغییر داد. همچنین برای این ویژگی می توان مقادیر منفی نیز وارد کرد.مثال هایی از استفاده از واحدهای طولی برای این ویژگی را در کد زیر مشاهده می کنید:

word-spacing: 1em;
word-spacing: .8rem;
word-spacing: 5px;
word-spacing: -5px;

برای این ویژگی بهتر از واحد em استفاده کنیم،زیرا استفاده از این واحد باعث می شود با تغییر سایز فونت متون،فاصله کلمات نیز به همان نسبت تغییر کند.

مقدار inherit

با استفاده از این مقدار می توان مقدار پدر عنصر را برای خود عنصر نیز تعیین کرد.

در دموی زیر مثال هایی از نحوه استفاده از این ویژگی را مشاهده می کنید:

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد،با ادامه مقالات آموزش CSS با ما همراه باشید.

کامنت جدید ...