word-spacing

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

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

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

 

مقادیر ویژگی word-spacing

 

word-spacing: normal | <length> | inherit

 

 

normal

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

 

مقدار طولی

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

 

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

 

از آنجا که می خواهیم اگر اندازه فونت تغییر کرد فاصله کلمات هم به همان تناسب تغییر کنند بهتر است از واحدهای نسبی مثل em استفاده کنیم.

 

inherit

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

 
word-spacing می تواند تحت تاثیر ویژگی text-align قرار بگیرد و فاصله بین کلمات نیز تغییر کند. همچنین word-spacing بر روی white-space نیز امکان دارد تاثیر گذار باشد.

دموی زیر را بررسی کنید:
 

See the Pen word-spacing by Mojtaba Seyedi (@seyedi) on CodePen.