Css отступ между буквами – как в css сделать отступ между строками текста и букв? как в css сделать отступ между строками текста и букв?

letter-spacing - Веб-технологии для разработчиков

This translation is incomplete. Please help translate this article from English

Свойство letter-spacing определяет межбуквенное расстояние в тексте.

Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучавствовать в их улучшении, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам pull-реквест.

Синтаксис

/* Значения - ключевые слова */
letter-spacing: normal;

/* Значения <length> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Глобальные значения */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

Значения

normal
Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения 0, это ключевое слово позволяет агенту пользователя изменить расстояние между буквами для выравнивания текста.
<length>
Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.

Формальный синтаксис

normal | <length>

Примеры

HTML

<p>letter spacing</p>
<p>letter spacing</p>
<p>letter spacing</p>
<p>letter spacing</p>
<p>letter spacing</p>

CSS

.normal   { letter-spacing: normal; }
.em-wide  { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide  { letter-spacing: 6px; }

Результат

Проблемы доступности

Большие положительные или отрицательные значения свойства letter-spacing могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.

Спецификации

Браузерная совместимость

Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий https://github.com/mdn/browser-compat-data и отправьте нам pull-реквест. Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
letter-spacingChrome Полная поддержка 1Edge
Полная поддержка
12
Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android
Полная поддержка
1.0
SVG supportChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 72IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Нет поддержки
Нет
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также

Расстояние между буквами. CSS Letter-spacing

Все сайты уникальны, каждый имеет свой оригинальный дизайн. Текст, который является главной составляющей любого сайта, должен соответствовать общей стилизации. Иногда простого изменения семейства шрифтов и цвета недостаточно для создания красивого текста. В таком случае нам на помощь приходит letter-spacing – свойство для изменения расстояния между буквами в CSS

Зачем нужно свойство letter-spacing?

Если увеличить расстояние между буквами в CSS, то можно получить уникальный стиль оформления текста.

Для создания уникального шрифта иногда приходится создавать отступы между буквами. Увеличить расстояние между буквами можно только через CSS. В нем эту функцию выполняет свойство letter-spacing.

Оно является дополнительным инструментом в CSS, который позволяет изменить расстояние между буквами. Но иногда именно его и не хватает для хорошей стилизации текстового контента.

Как изменить расстояние между буквами? CSS: letter-spacing

Во всех браузерах это свойство задано по умолчанию. Оно применимо ко всем современным браузерам, и не только (например, Internet Explorer).

Значение этого свойства наследуется для всех потомков селектора. Это значит, что, задав отступы между буквами для тега body, вы измените значение letter-spacing для всей страницы.

Еще один момент: учитывайте заданный шрифт. Для каждого отступы между буквами разнятся. Разница небольшая, измеряется в долях пикселей, но имейте в виду.

Работа этого свойства заключается в том, что оно добавляет к каждой букве отступы с правой стороны. Оно изменяет расстояние между буквами на более детальном уровне. Работает по принципу margin-left. Letter-spacing может задаваться в разных величинах: относительных (em, rem, ex и другие) и абсолютных (px, mm, cm). Наиболее пригодными для использования являются величины px, rem и em. Конечно, лучше всего указывать значение в пикселях, так как оно наиболее удобное и лучше подходит для изменения маленького расстояния.

HTML код для использования свойства Letter-spacing

Для начала заполните страницу контентом, на котором мы будем тестировать это свойство.

CSS код свойства Letter-spacing

Чтобы задать его, откройте ваш CSS-документ, а затем запишите строчку letter-spacing: 5px для тега body. Такая запись будет означать, что на всей странице расстояние между буквами увеличится на 5 пикселей (будет равняться 6 или 5,5 в зависимости от шрифта).

После того, как вы запишите вышепоказанный код, у вас получится такая веб-страница:

Результат использования свойства Letter-spacing

Положительные значения обычно не превышают 3-5 пикселей, но не всегда. Иногда используются и более длинные расстояния, например, при создании основного заголовка. Делать расстояние выше 10px не рекомендуется, так как текст получится нечитабельным.

Кроме того, есть возможность уменьшить расстояние между буквами в CSS. Задается так же, но со знаком "-". Обычно минимальное значение равно -1 px. Можно задать и -10, даже -20, но текст читать будет невозможно. Если хотите сделать текст с маленькими отступами, не используйте значение менее 200px.

Практическое применение

В CSS расстояние между буквами используется для создания уникального шрифта. Может также применяться при создании заголовков, если использовать вместе со свойством font-style: italic и хорошим цветом, может послужить альтернативой хорошему логотипу.

Также, если правильно использовать данное свойство вместе с text-align: center, можно задать красивый заголовок статьи для блога.

Letter-spacing – отличное CSS-свойство для изменения расстояния букв друг от друга. Главное – не перебарщивайте с отступами.

Отступы, пробелы, расстояния, пустое пространство

font-kerning: кернинг

<style>
div {
  font-kerning: auto;
}
</style>

<div>Свойство <code>font-kerning</code> наследуется, применяется ко всем элементам, изменяет текст</div>

letter-spacing: доп. расстояние между буквами

<style>
div {
  letter-spacing: normal;
}
</style>

<div>Свойство <code>letter-spacing</code> наследуется, применяется ко всем элементам, изменяет текст</div>

word-spacing: доп. расстояние между словами

<style>
div {
  word-spacing: normal;
}
</style>

<div>Свойство <code>word-spacing</code> наследуется, применяется ко всем элементам, изменяет текст и строчные элементы</div>

text-indent: отступ первой строки

<style>
div {
  text-indent: 0;
}
</style>

<div>Свойство <code>text-indent</code> наследуется, применяется к блочным элементам, изменяет текст и строчные элементы</div>

text-align: выравнивание содержимого блока по горизонтали

Свойство text-align наследуется, применяется к блочным элементам, изменяет текст и строчные элементы

start при direction: ltr; содержимое выравнено по левому краю, при direction: rtl; — по правому
end при direction: ltr; содержимое выравнено по правому краю, при direction: rtl; — по левому
left содержимое выравнено по левому краю
right содержимое выравнено по правому краю
center содержимое выравнено по середине
justify содержимое последней строки выравнено как при значении start, если иное не указано в свойстве text-align-last, остальные строчки выравнены по ширине
justify-all содержимое выравнено по ширине
match-parent если родителю заданы свойства direction: ltr; и text-align: start;, то содержимое выравнено по левому краю, если direction: rtl; и text-align: start;, то — по правому; если родителю заданы свойства direction: ltr; и text-align: end;, то содержимое выравнено по правому краю, если direction: rtl; и text-align: end;, то — по левому
initial start
inherit наследует значение родителя
unset наследует значение родителя
<style>
div {
  text-align: start;
}
</style>

<div>Свойство <code>text-aligng</code> наследуется, применяется к блочным элементам, изменяет текст и строчные элементы</div>

line-height: расстояние между строк

<style>
div {
  line-height: normal;
}
</style>

<div>Свойство <code>line-height</code> наследуется, применяется ко всем элементам, изменяет текст и строчные элементы</div>

padding: внутренний отступ

<style>
div {
  padding: 0;

  

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
</style>

<div>Свойство <code>padding</code> наследуется, применяется ко всем элементам, изменяет блочные и строчные элементы</div>

margin: внешний отступ

<style>
div {
  padding: 0;

  

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
</style>

<div>Свойство <code>margin</code> наследуется, применяется ко всем элементам, изменяет блочные и строчные элементы</div>

Использованные материалы:

  1. developer.mozilla.org
сократить пропуск поменять расставить поставить исправить отредактировать большой маленький

border-spacing | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Синтаксис

border-spacing: значение1 [значение2]

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
   table {
    border: 4px double #333; /* Рамка вокруг таблицы */ 
    border-collapse: separate; /* Способ отображения границы */ 
    width: 100%; /* Ширина таблицы */ 
    border-spacing: 7px 11px; /* Расстояние между ячейками */ 
   }
   td {
    padding: 5px; /* Поля вокруг текста */ 
    border: 1px solid #a52a2a; /* Граница вокруг ячеек */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>1</td><td>2</td>
   </tr>
   <tr>
    <td>3</td><td>4</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-spacing

Браузеры

Если к тегу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется. Исключением из этого правила является браузер Internet Explorer до версии 7.0 включительно, который не понимает свойство border-spacing.

Отправить ответ

avatar
  Подписаться  
Уведомление о