Как сделать отступ между текстом css
Перейти к содержимому

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

  • автор:

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

Обычно про наборе текста для формирования пространства между словами используется пробел. Иногда это расстояние необходимо скорректировать. В CSS существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.

Пример ниже добавит к каждому пробелу дополнительные 15px.

 Добавим к словам дополнительный отступ 
p  word-spacing: 15px; > 

Свойство border-spacing

Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.

Синтаксис

Значения

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

Значение по умолчанию: 0 . Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing , поэтому по умолчанию вы увидите отступы между ячейками.

Замечания

Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).

Аналогичного эффекта нельзя добиться с помощью margin , так как margin для ячеек таблицы не работает.

Если задано свойство border-collapse в значении collapse — border-spacing работать не будет.

Пример . Одно значение

Давайте сделаем отступы между ячейками (и между ячейкой и границей таблицы) в 10px :

1 2 3
4 5 6
7 8 9

table < border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >

Пример . Два значения

А теперь сделаем отступы в 10px по горизонтали и 30px по вертикали:

1 2 3
4 5 6
7 8 9

table < border-spacing: 10px 30px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >

Пример . Зададим border-collapse: collapse

А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse :

1 2 3
4 5 6
7 8 9

table < border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >

Как сделать отступы между строками в тексте средствами css?

Такие отступы нужны а вот как это выглядит сейчас Как сделать отступы именно между строками, а не словами?

.left_block__p

Отслеживать
задан 19 окт 2020 в 6:20
51 2 2 серебряных знака 8 8 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.left_block__p

Отслеживать
ответ дан 19 окт 2020 в 6:26
Евгений Платов Евгений Платов
1,363 1 1 золотой знак 8 8 серебряных знаков 7 7 бронзовых знаков
спасибо большое, помогли
19 окт 2020 в 6:32

Свойство line-height устанавливает высоту строк и расстояние между ними

Отслеживать
ответ дан 19 окт 2020 в 6:26
2,018 9 9 серебряных знаков 29 29 бронзовых знаков
спасибо большое, помогли
19 окт 2020 в 6:32

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Отступы между столбцами и строками¶

Для создания отступов между столбцами и строками применяются свойства grid-column-gap и grid-row-gap соответственно.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
 html> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>Grid Layout в CSS3title> style> *  box-sizing: border-box; > html, body  margin: 0; padding: 0; > .grid-container  height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; > .grid-item  text-align: center; font-size: 1.1em; padding: 1.5em; color: white; > .color1  background-color: #675ba7; > .color2  background-color: #9bc850; > .color3  background-color: #a62e5c; > .color4  background-color: #2a9fbc; > .color5  background-color: #4e342e; > style> head> body> div class="grid-container"> div class="grid-item color1">Grid Item 1div> div class="grid-item color2">Grid Item 2div> div class="grid-item color3">Grid Item 3div> div class="grid-item color4">Grid Item 4div> div class="grid-item color1">Grid Item 5div> div class="grid-item color4">Grid Item 6div> div class="grid-item color5">Grid Item 7div> div> body> html> 

Отступы между столбцами и строками

Если значения свойств grid-column-gap и grid-row-gap совпадают, то вместо них можно определить одно свойство grid-gap , которое установит оба отступа:

1 2 3 4 5 6 7
.grid-container  height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; > 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *