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

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

  • автор:

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. Он выглядит следующим образом:

Пример text-indent

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Ключевые слова

Скопировать ссылку «Ключевые слова» Скопировано

Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.

  • hanging — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
  • each — line — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью ).

Единицы измерения

Скопировать ссылку «Единицы измерения» Скопировано

Значение свойства можно задать в любых единицах измерения включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Отступ текста

Утилиты для управления количеством пустого пространства, отображаемого перед текстом в блоке.

Show all classes

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

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

p class="indent-8"> Итак, я пошел в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, в тот момент я em>былem> морским биологом. p>

Чтобы использовать отрицательное значение отступа текста, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.

div class="-indent-8"> Итак, я пошел в воду. Я не буду лгать. div>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : indent-8 , чтобы применять утилиту indent-8 только при hover .

div class="indent-4 hover:indent-8"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: indent-8 , чтобы применить утилиту indent-8 только на экранах среднего размера и выше.

div class="indent-4 md:indent-8"> div> 

CSS урок 10. Отступ и граница элемента CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

пример отступа элемента

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

css margin-left

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.

Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

. style type="text/css">
p{ border:5px solid red; /* красная рамка */ margin:20px; } div{ border:5px solid green; /* зеленая рамка */ }
/style>/head> body> div> Агния Барто - стихи p> Я на уроке в первый раз.br/> Теперь я ученица.br/> Вошла учительница в класс,-br/> Вставать или садиться?br/> /p> .

Агния Барто — стихи

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

.

Результат:

Агния Барто — стихи

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

. style type="text/css">
p{ border:5px solid red; /* красная рамка */ padding:20px; /* внутренний отступ */ }
/style>/head> body> p> Я на уроке в первый раз.br/> Теперь я ученица.br/> Вошла учительница в класс,-br/> Вставать или садиться?br/> /p> .

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

style type="text/css">
p.one{ border-style:solid; border-width:5px; } p.two{ border-style:solid; border-width:medium; }
/style>/head> body> p class="one"> Я на уроке в первый раз.br/> Теперь я ученица.br/> Вошла учительница в класс,-br/> Вставать или садиться?br/> /p> p class="two"> Как надо парту открывать,br/> Не знала я сначала,br/> И я не знала, как вставать,br/> Чтоб парта не стучала.br/> /p>

Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Для каждой стороны границы можно задать свой стиль:

p{ border-top-style:solid; border-right-style:dotted; border-bottom-style:dashed; border-left-style:none; border-top-color:#0f0; border-right-color:#f00; }

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

Внешние границы в CSS создаются при помощи свойства outline , одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border , свойство outline не влияет на положение блока и его ширину.

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

img{ padding:20px; /* Поля вокруг изображения */ margin-right:10px; /* отступ справа */ margin-bottom:10px; /* отступ снизу */ outline:1px solid #666; /* параметры границы */ background:#f0f0f0; /* цвет фона */ }

Результат:

пример внутренних отступов css

Двойная рамка с использованием CSS

Пример:

p{ border:5px solid red; outline:6px solid orange; }

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Пример:

. .photo { width : 150px; padding : 10px 10px 20px 10px; border : 1px solid #BFBFBF; background-color : white; -webkit-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); }
/style>/head> body> div class="photo"> img src="2.JPG" width="150" alt=""> p>Не ешь меня. /p> /div> .

Результат:

124. Как сделать отступ или красную строку в CSS

Большую часть времени веб-разработчики тратят на то, где будет располагаться текст и, как он будет выглядеть. Существует множество свойств, которые позволяют работать с текстом. Иногда текст и шрифты используют как синонимы. Разделим эти два понятия. Текст – это содержимое, а шрифт – это то, что отображает содержимое.

Одним из самых распространенных эффектов является отступ первой строки абзаца (в просторечие: красная строка). Он позволяет создать видимость структурированности текста.

Свойство text-indent реализует отступы в CSS. Рассмотрим его синтаксис:

text-indent: длина | проценты;

Результатом применения свойства является смещение первой строки любого блочного элемента на заданную длину или процентное соотношение. Допускаются отрицательные значения. Не допускается применение свойства к строковым элементам. Далее пример применения свойства text-indent .

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

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

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