Как сделать отступ текста в css

Как сделать отступ между словами в 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 для того, чтобы увидеть как это влияет на блок.

Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

text-indent

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

Синтаксис

/* Ключевые слова */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* значение */ text-indent: 3mm; text-indent: 40px; /* значение зависит от ширины блока*/ text-indent: 15%; /* международные значения */ text-indent: inherit; text-indent: initial; text-indent: unset; 

Значения

each-line Экспериментальная возможность (экспериментальное значение)

Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.

hanging Экспериментальная возможность (экспериментальное значение)

Отступ добавляется ко всем строкам, кроме первой.

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

text-indent =
[ (en-US) ] (en-US) && (en-US)
hanging? (en-US) && (en-US)
each-line? (en-US)

=
| (en-US)

Простые примеры отступов

HTML

p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p> p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p> 

CSS

p  text-indent: 5em; background: powderblue; > 

Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

Как можно догадаться, внешний блок ограничивает ширину внутреннего. А внутренний ограничивает высоту внешнего. Чтобы различать блоки, подкрасим их рамки: внутренний будет красным, внешний синим. Получится такой результат:

Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:

На странице браузера получится такой результат:

• margin-left — отступ слева
• margin-right — отступ справа
• margin-top — отступ сверху
• margin-bottom — отступ снизу

Получится такой результат:

Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.

Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.

С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

Попробуем продемонстрировать эту центровку:

В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

 
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 

Результат будет таким:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

• padding-left — отступ слева
• padding-right — отступ справа
• padding-top — отступ сверху
• padding-bottom — отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:

 
Без отступа
 
С отступом
 

В браузере получится такой результат:

Без отступа
 
С отступом
 

Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

 
Без отступа
 
С отступом
 

Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.

Без отступа
 
С отступом

Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .