text — indent
С помощью text — indent можно создать «красную строку» — добавить отступ для первой строки абзаца.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text — indent управляет отступом первой строки текста: либо вытягивает строку за пределы абзаца, либо утягивает её внутрь. Используется для выделения начала абзаца при плотном наборе без отступов между абзацами.
Строка смещается по горизонтали относительно начала строки.
Пример
Скопировать ссылку «Пример» Скопировано
Значение в пикселях:
div text-indent: 20px;>div text-indent: 20px; >
Процент рассчитывается от ширины блока:
div text-indent: 15%;>div text-indent: 15%; >
Значения ключевых слов:
Пример корректно отображается только в Safari. Он выглядит следующим образом:
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.
- hanging — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
- each — line — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью ).
Единицы измерения
Скопировать ссылку «Единицы измерения» Скопировано
Значение свойства можно задать в любых единицах измерения включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.
Как сделать отступ между словами в css
Обычно про наборе текста для формирования пространства между словами используется пробел. Иногда это расстояние необходимо скорректировать. В CSS существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.
Пример ниже добавит к каждому пробелу дополнительные 15px.
Добавим к словам дополнительный отступ
p word-spacing: 15px; > CSS: Внутренние отступы
Рассматривая различные блоки, которые были созданы на протяжении всех уроков можно заметить, что текст «прилипает» к краям блоков. Например:
Карточка с белым текстом на фиолетовом фоне
Вы можете сказать, что в самих уроках примеры обычно выглядят не так и будете правы. В каждом примере, чтобы добавить «воздуха» использовались внутренние отступы от краёв блока.
Для создания внутренних отступов используется 4 правила:
- padding-top — внутренний отступ сверху
- padding-right — внутренний отступ справа
- padding-bottom — внутренний отступ снизу
- padding-left — внутренний отступ слева
Каждое свойство принимает числовое значение и единицу измерения, например пиксели
.card
Карточка с белым текстом на фиолетовом фоне
Сокращённое свойство
Если нужно установить отступы по всем сторонам, то используют не 4 разных свойства, а одно — padding . Оно является сокращением от уже известных свойств и позволяет установить:
- отступ сверху
- отступ справа
- отступ снизу
- отступ слева
Порядок указания важен и соответствует тому, как он указан выше. Если переработать пример выше, то он будет выглядеть так:
.card
Помимо такой записи для удобства существуют сокращённые записи этих правил:
- Если указать только одно значение, то оно будет использовано одновременно для всех сторон
- Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
- Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
Задание
Добавьте в редактор параграф с классом padding и установите внутренние отступы:
- 10 пикселей сверху
- 15 пикселей снизу
- 20 пикселей слева и справа
Используйте следующий текст для параграфа:
Что делает верстальщик? Создаёт страницы с помощью HTML и CSS. Умеет пользоваться возможностями модулей Flex и Grid. Использует препроцессор SASS, шаблонизатор Pug и собирает проекты с помощью Gulp. Следит за доступностью сайта, создавая семантически правильную разметку. Создаёт компоненты и утилиты на Bootstrap. Верстает адаптивные проекты
Сам текст не имеет значения и не проверяется. Основная цель — добавить текст, который будет расположен в несколько строк. Это поможет корректно увидеть левые и правые отступы.
Добавьте черный фон к параграфу и белый цвет текста. Попробуйте различные значения свойства padding для того, чтобы увидеть как это влияет на блок.
Стили запишите в теге
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Использование отступов для оформления текста
Чтобы текст был более читаемым, необходимо наличие свободного пространства в блоке для этого текста. Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».
За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы. Пример, как можно их использовать:
В примере выше задан внутренний отступ со всех сторон 10px , а также внешний отступ сверху и снизу 20px и 0px слева и справа. Это составные свойства. Подробно padding и margin разбираются в части «Блочная модель документа».
Посмотрите на блок aside на нашем сайте. Блоку явно не хватает отступов, давайте добавим их!
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим