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

Как создать отступ первой строки css

  • автор:

Красная строка

Красная строка в 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.

Если тегу

задать значение text-indent , то все его содержимое, находящееся на первой строке, сдвигается.

Неудобно, что свойство text-indent наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.

 p mark 

Разбивать текст на абзацы следует с помощью тега <p>.

У тега <p> могут быть следующие дочерние элементы [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.

Если тегу <p> задать значение text-indent, то все его содержимое, находящееся на первой строке, сдвигается.

Неудобно, что свойство text-indent наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.

text-indent

  • к первой строке блока,
  • к каждой строке после принудительного разрыва строки ( Enter и
    ),

Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа.
Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

  
Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа. Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

Запретить наследование text-indent

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

 p < text-indent: 2em; >p * < text-indent: initial; /* начальное значение (по умолчанию) */ > mark 

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

Отодвигать только текст красной строки абзаца

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

  

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter .

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

 p::first-letter 

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter.

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

Как создать отступ первой строки css

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Что такое отступ первой строки?

Для отступа первой строки отвечает специальное свойство, которое называется text-indent

Что такое отступ первой строки?

Данное свойство text-indent регулирует величину отступа первой строки элемента. Данное свойство распространяется только на первую строку элемента. Возможно использование отрицательного значения отступа первой строки.

Синтаксис text-indent отступа первой строки :

Как переводится text-indent :

«text» — переводится как текст(с английского.)

«indent» — у данного слова множество значений и только перевод слова, когда слово является глаголом

Как применяется text-indent отступа первой строки :

Для использования text-indent и создания отступа первой строки можно использовать 3 варианта:

Пример «отступа первой строки» в html

Для того, чтобы сделать отступ первой строки нам понадобится какой-то повторяющийся тег. Пусть это будет «p»

Далее нам понадобится какой-то отдельный блок, чтобы не распространять на всю страницу и увидеть разницу :

Во внутрь поместим теги, каждая первая строка будет подчиняться свойству первой строки :

Данный текст — это реализация примера «отступа первой строки«. Каждый новый текст будет отдельным цветом.

Чтобы можно было отличить данный текст по цвету и понять — что именно здесь и применяется «отступ первой строки«

Вообще «text-indent» — довольно часто используется на сайте. Ну я точно его использую довольно часто!

Далее пропишем отступ для каждой новой первой строки в данном блоке : text-indent: 25px;

Соберем весь код отступа строки вместе:

Html:

Данный текст — это реализация примера «отступа первой строки«. Каждый новый текст будет отдельным цветом.

Чтобы можно было отличить данный текст по цвету и понять — что именно здесь и применяется «отступ первой строки«

Вообще «text-indent» — довольно часто используется на сайте. Ну я точно его использую довольно часто!


CSS:

Результат использования свойства text-indent:

Данный текст — это реализация примера «отступа первой строки«. Каждый новый текст будет отдельным цветом.

Чтобы можно было отличить данный текст по цвету и понять — что именно здесь и применяется «отступ первой строки«

Вообще «text-indent» — довольно часто используется на сайте. Ну я точно его использую довольно часто!

Отступ первой строки html без css

Как можно сделать отступ первой строки без css!? Нам нужен символ из таблицы, где расположены (символы html).

Ищем неразрывный пробел html :

Далее берем любую строку и впереди помещаем столько пробелов, на сколько вправо вам нужно сместить первую строку, таким образом получим «отступ первой строки» без css

     Это строка с отступом без css

Пример отступа первой строки без css.

Это строка с отступом без css

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

text-indent

Устанавливает величину отступа первой строки блока текста (например, для абзаца

). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Краткая информация

Значение по умолчанию 0
Наследуется Да
Применяется К блочным элементам
Анимируется Да

Синтаксис

text-indent: |
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div < text-indent: >px; >

Пример

text-indent

Огневое нападение бывает пяти видов: первое, когда сжигают людей; второе, когда сжигают запасы; третье, когда сжигают обозы; четвертое, когда сжигают склады; пятое, когда сжигают отряды.

Сунь-цзы, Искусство войны. Перевод Николай Конрад.

Результат данного примера показан на рис. 1.

Применение свойства text-indent

Рис. 1. Применение свойства text-indent

Объектная модель

Объект.style.textIndent

Спецификация

Спецификация Статус
CSS Text Level 3 Рабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3 12 1 3.5 1 1

В таблице браузеров применяются следующие обозначения.

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

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

См. также

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

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

 p < text-indent: 2em; >mark 

Разбивать текст на абзацы следует с помощью тега <p>.

У тега <p> могут быть следующие дочерние элементы [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 элементов отсутствует отступ слева до содержимого.

 p < text-indent: 2em; >p * < text-indent: 0; >mark 

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

Отодвигать только текст красной строки абзаца

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

  

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter .

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

 p:first-letter 

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter.

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

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

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