Text indent html что это
Свойство text-indent
Синтаксис
Описание
Свойство text-indent (от англ. «text indent» ‒ «отступ текста») определяет отступ перед первой форматируемой строкой (красной строкой) в блочном контейнере.
Красная строка
| Применяется: | к блочным контейнерам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | относительно ширины блочного родительского элемента; |
| Медиа : | визуальные. |
Примечание
JavaScript
Поддержка браузерами
Спецификация
Значения
Задаёт отступ фиксированной длины.
Процент от ширины содержательного блока.
each-line Отступ влияет на первую строку блока-контейнера, а также на каждую строку после принудительного разрыва строки, но не влияет на строки после разрыва по символу мягкого переноса. hanging Инвертирует то на какие строки влияет. inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: « 0 ».
Примечание: допускаются отрицательные значения, но при этом в конкретной реализации могут существовать определённые ограничения. Если значение данного свойства является отрицательным или превышает ширину блока, то текст первой строки может выходить за пределы блока. При этом будет ли отображаться текст выходящий за пределы блока зависит от свойства «overflow».
Пример использования
Красная строка
style= «margin:0;» > Есть лица, которые существуют на свете не как предмет, а как посторонние крапинки или пятнышки на предмете. Сидят они на том же месте, одинаково держат голову, их почти готов принять за мебель и думаешь, что отроду ещё не выходило слово из таких уст; а где-нибудь в девичьей или в кладовой окажется просто: ого-го!
text-indent
Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
| Начальное значение | 0 |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | интерполируются как вещественные числа с плавающей запятой.»>длина, интерполируются как вещественные числа с плавающей запятой.»>проценты или calc(); |
Синтаксис
Значения
) соотношении отступ зависит от ширины всего блока, внутри которого находится строка. each-line (экспериментальное значение) Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. hanging (экспериментальное значение) Отступ добавляется ко всем строкам, кроме первой.
Как сделать табуляцию или отступ в HTML?
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Рекомендованный способ в CSS и HTML
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Рекомендованный метод в HTML
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка : можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка : Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод, позволяющий создать HTML отступ текста — с помощью
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, дизлайки, отклики!
Отступ первой строки (свойство text-indent) | CSS
text-indent
Что такое text-indent CSS
Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа.
Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.
Красная строка в HTML: как сделать отступ первой строки абзаца
Разбивать текст на абзацы следует с помощью тега
могут быть следующие дочерние элементы [w3.org]: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.
И все эти дочерние элементы дружно отодвигаются, находясь на первой строке.
Неудобно, что свойство наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.
Запретить наследование text-indent
Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.
Отодвигать только текст красной строки абзаца
Предложение после картинки не смещёно, так как оно находится уже на второй строке.
Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.
text-indent
| Браузер |  Internet Explorer |  Netтscape |  Опера |  Safari |  Mozilla Firefox | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Краткая информация
| CSS (ЦСС) | CSS (ЦСС)1 |
|---|---|
| Значение по умолчанию | 0 |
| Наследуется | Да |
| Применяется | К блочным элементам |
| Аналог ШТМЛ | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-text-indent |
Описание
Устанавливает величину отступа первой строки блока контента (например, для параграфа
). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для разработки выступа первой строки, но следует проверить, чтобы контент не выходил за пределы окна браузера.
Синтаксис
text-indent: значение | проценты
Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS (ЦСС) — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление Errors.
ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.