Давайте получим полезные навыки при работе с текстом. Пора уже обуздать непослушные буквы и научиться управлять как отступами между строками так и интервалами между символами. Все проще чем Вы думаете. Пара строк кода внесет порядок в неровный текстовой строй на нашей страничке.

 

1. Контроль растояния между словами без пробелов.

Для того чтобы увеличить растояние между слов, (например тестовая навигация) раньше я часто использовал пробелы   или вставлял прозрачный GIF,с определённой длинной.
С помощью CSS это можно сделать гораздо проще:

 

  Пример: Растояние между словами 50 пикселей

Увеличиваем растояние между словами

<span style="word-spacing:50px">Увеличиваем растояние
 междусловами</span>

2. Межбуквенный интервал

 

 

  Пример: Межбуквенный интервал 10 пиксель

Увеличиваем интервал между буквами

 

<span  style="letter-spacing:10px ">Увеличиваем интервал 
между буквами</span>

 

3. Межстрочный интервал

 

Без использования пробелов, вставки прозрачных рисунков можно с высокой точностью (CSS) задать растояние между строк:

Пример: 30 пикселей между строками.
Контролируем растояние между строчек с высокой точностью.
Межстрочный интервал = 30 пикселей

<span style="line-height:30px ">Контролируем растояние между 
    строчек с высокой точностью. <br>   Межстрочный интервал = 
30 пикселей</span>

4. Текст в рамке
Пример:

Рамка точки, тонкая обводка, цвет обводки #ff5730

<span style="border-width:thin; 
border-style:dotted; border-color:#FF5730">
Рамка точки, тонкая обводка, цвет обводки #ff5730 </span>

Пример:

Рамка штрих, тонкая обводка, цвет обводки #ff5730

<span style="border-width:thin; border-style:dashed;
 border-color:#FF5730"> Рамка штрих, 
тонкая обводка, цвет обводки #ff5730 </span>

Пример:

Рамка 3D-Эффект Groove, жирная обводка, цвет обводки #ff5730

<span style="border-width:thick; border-style:groove; 
border-color:#FF5730"> Рамка 3D-Эффект Groove, 
жирная обводка, цвет обводки #ff5730 </span>

Попробуйте другие 3D - Еффекты соответсвенно заменив border-style:groove на
border-style:inset или border-style:ridge или border-style:outset

Пример:

Рамка простая, обводка 10 пикселей, цвет обводки #ff5730

<span style="border-width:10px; border-style:solid; 
border-color:#FF5730"> Рамка простая, 
обводка 10 пикселей, цвет обводки #ff5730 </span>