Абзацный отступ css: Как задать в CSS3 обратный абзацный отступ? — Хабр Q&A

Содержание

css отступ текста слева — ComputerMaker.info

Автор admin На чтение 5 мин. Просмотров 46 Опубликовано

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

Поля и отступы: в чём разница?

Прежде чем начинать форматировать текст, следует разобраться, что такое поля и отступы. Несмотря на то что эти элементы разметки в ряде случаев выглядят для пользователя одинаково, между ними существуют принципиальные различия:

  • поле задаётся свойством padding, отступ –
    margin
    ;
  • поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
  • поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

Свойство margin

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

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

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:

  1. margin: 11px 22px.
  2. margin: 11px 22px 33px.
  3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

Также доступна возможность записи расстояния до границы блока только с одной стороны:

margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

Для остальных сторон расстояния вокруг блока принимаются равными значению элемента-родителя.

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства

margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

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

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить выравнивание по ширине, то есть записать:

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

Для данного свойства может быть выставлено значение inherit. Такая запись говорит, что блок использует аналогичное свойство родительского блока.

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

Чтобы буквы не перешли за левую границу браузера, дополнительно к

text-indent нужно использовать конструкцию для задания поля:

Полезные рекомендации

Основные свойства CSS для форматирования текста рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

  • красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
  • для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
  • отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.

Свойство padding определяет величину отступа между границами элемента и его содержимым.

auto — определяется браузером.

num — число с единицами измерения.

— от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
padding-top, padding-right, padding-bottom, padding-left.

существует краткая запись задания разных отступов от каждой стороны: padding(отступ сверху, отступ справа, отступ снизу, отступ слева)..

Порядок строго как указан!

Свойство margin определяет величину отступа между границами элемента и соседними элементами.

auto — определяется браузером.

num — число с единицами измерения.

— от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
margin-top, margin-right, margin-bottom, margin-left.

существует краткая запись задания разных отступов от каждой стороны: margin(отступ сверху, отступ справа, отступ снизу, отступ слева).

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию 0
Наследуется Да
Применяется К блочным элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

Синтаксис

Значения

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

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

css отступ текста слева — Все о Windows 10

На чтение 5 мин. Просмотров 109 Опубликовано

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

Поля и отступы: в чём разница?

Прежде чем начинать форматировать текст, следует разобраться, что такое поля и отступы. Несмотря на то что эти элементы разметки в ряде случаев выглядят для пользователя одинаково, между ними существуют принципиальные различия:

  • поле задаётся свойством padding, отступ – margin;
  • поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
  • поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

Свойство margin

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

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

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:

  1. margin: 11px 22px.
  2. margin: 11px 22px 33px.
  3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

Для остальных сторон расстояния вокруг блока принимаются равными значению элемента-родителя.

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

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

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить выравнивание по ширине, то есть записать:

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

Для данного свойства может быть выставлено значение inherit. Такая запись говорит, что блок использует аналогичное свойство родительского блока.

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

Полезные рекомендации

Основные свойства CSS для форматирования текста рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

  • красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
  • для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
  • отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.

Свойство padding определяет величину отступа между границами элемента и его содержимым.

auto – определяется браузером.

num – число с единицами измерения.

– от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
padding-top, padding-right, padding-bottom, padding-left.

существует краткая запись задания разных отступов от каждой стороны: padding(отступ сверху, отступ справа, отступ снизу, отступ слева)..

Порядок строго как указан!

Свойство margin определяет величину отступа между границами элемента и соседними элементами.

auto – определяется браузером.

num – число с единицами измерения.

– от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
margin-top, margin-right, margin-bottom, margin-left.

существует краткая запись задания разных отступов от каждой стороны: margin(отступ сверху, отступ справа, отступ снизу, отступ слева).

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию
Наследуется Да
Применяется К блочным элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

Синтаксис

Значения

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

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Создание классических типографских эффектов: первая висячая строка абзаца

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

 

 


Для начала, создадим разметку HTML:

<p>Leverage agile frameworks to provide a robust synopsis for high level
overviews. Iterative approaches to corporate strategy foster collaborative
thinking to further the overall value proposition.
<p>Bring to the table win-win survival strategies to ensure proactive domination.
At the end of the day, going forward, a new normal that has evolved from
generation X is on the runway heading towards a streamlined cloud solution.
User generated content in real-time will have multiple touchpoints for offshoring.

После этого запишем встроенный или подключенный код CSS:

Мы сразу столкнемся с проблемой: селектор элемента задаст такой внешний вид всем абзацам. Нам нужно ограничить область применения стилей только первым абзацем. Самый простой способ сделать это — использовать селектор first-of-type, который обращается только к первым элементам данного типа:

p:first-of-type {
        text-indent: -4em;
}

Но это в свою очередь создаст другую проблему: теперь первая строка первого абзаца, вероятно, выйдет за левый край окна браузера. Чтобы уравновесить этот эффект, оттолкнем абзац вправо, используя свойство внешнего левого отступа:

p:first-of-type {
        text-indent: -4em;
        margin-left: 6em;
}

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

p {
        margin: 6em inital;
}
p:first-of-type {
        text-indent: -4em;
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

определение и синонимы слова отступ в словаре русский языка

ПРОИЗНОШЕНИЕ СЛОВА ОТСТУП

ЧТО ОЗНАЧАЕТ СЛОВО ОТСТУП

Отступ

Отступ — отклонение от края колонки одной или нескольких строк, идущих подряд.
Значение слова отступ в словаре русский языка

ОТСТУП, -а, м. Свободное пространство, оставляемое перед началом строки написанного или напечатанного текста. Отступ в начале абзаца. Писать с отступом.

СЛОВА, РИФМУЮЩИЕСЯ СО СЛОВОМ ОТСТУП

Синонимы и антонимы слова отступ в словаре русский языка

ПЕРЕВОД СЛОВА ОТСТУП

Посмотрите перевод слова отступ на 25 языков с помощью нашего многоязыкового переводчика c русский языка. Переводы слова отступ с русский языка на другие языки, представленные в этом разделе, были выполнены с помощью автоматического перевода, в котором главным элементом перевода является слово «отступ» на русский языке.
Переводчик с русский языка на
китайский язык 缩进

1,325 миллионов дикторов

Переводчик с русский языка на
испанский язык muesca

570 миллионов дикторов

Переводчик с русский языка на
английский язык indent

510 миллионов дикторов

Переводчик с русский языка на
хинди язык खरोज

380 миллионов дикторов

Переводчик с русский языка на
арабский язык المسافة البادئة

280 миллионов дикторов

русский отступ

278 миллионов дикторов

Переводчик с русский языка на
португальский язык parágrafo

270 миллионов дикторов

Переводчик с русский языка на
бенгальский язык সংভৃতক

260 миллионов дикторов

Переводчик с русский языка на
французский язык tiret

220 миллионов дикторов

Переводчик с русский языка на
малайский язык inden

190 миллионов дикторов

Переводчик с русский языка на
немецкий язык Einzug

180 миллионов дикторов

Переводчик с русский языка на
японский язык インデント

130 миллионов дикторов

Переводчик с русский языка на
корейский язык 들여 쓰기

85 миллионов дикторов

Переводчик с русский языка на
яванский язык indent

85 миллионов дикторов

Переводчик с русский языка на
вьетнамский язык lõm vào

80 миллионов дикторов

Переводчик с русский языка на
тамильский язык உள்தள்ளலைக்

75 миллионов дикторов

Переводчик с русский языка на
маратхи язык मालाची मागणी

75 миллионов дикторов

Переводчик с русский языка на
турецкий язык çentik

70 миллионов дикторов

Переводчик с русский языка на
итальянский язык trattino

65 миллионов дикторов

Переводчик с русский языка на
польский язык akapit

50 миллионов дикторов

Переводчик с русский языка на
украинский язык відступ

40 миллионов дикторов

Переводчик с русский языка на
румынский язык liniuță

30 миллионов дикторов

Переводчик с русский языка на
греческий язык παύλα

15 миллионов дикторов

Переводчик с русский языка на
африкаанс язык streepje

14 миллионов дикторов

Переводчик с русский языка на
шведский язык strecksats

10 миллионов дикторов

Переводчик с русский языка на
норвежский язык innrykk

5 миллионов дикторов

ТЕНДЕНЦИИ ИСПОЛЬЗОВАНИЯ ТЕРМИНА «ОТСТУП»

На показанной выше карте показана частотность использования термина «отступ» в разных странах.

Примеры использования в литературе на русский языке, цитаты и новости о слове отступ

КНИГИ НА РУССКИЙ ЯЗЫКЕ, ИМЕЮЩЕЕ ОТНОШЕНИЕ К СЛОВУ

«ОТСТУП»

Поиск случаев использования слова отступ в следующих библиографических источниках. Книги, относящиеся к слову отступ, и краткие выдержки из этих книг для получения представления о контексте использования этого слова в литературе на русский языке.

1

Информатика: базовый курс : для студентов гуманитар. …

смещение называют соответственно левым или правым отступом. Каждый из отступов может быть как положительным, так и отрицательным. Отрицательный отступ фактически означает наложение абзаца на соответствующее …

Анатолий Николаевич Степанов, ‎Степанов А Н, 2010

2

Windows 8: разработка Metro-приложений для мобильных устройств

Дронов Владимир Александрович. Атрибутыстиля padding-left,padding-top,padding-right и padding-bottomпозволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента интерфейса: …

Дронов Владимир Александрович, 2013

3

OpenOffice.org 3. Полное руководство пользователя (+ …

Увеличить или уменьшить расстояние между абзацами можно только при помощи диалогового окна Абзац (вкладка Отступы и интервалы, секция Отбивка). Счетчик Перед абзацем позволяет задать расстояние (в сантиметрах) …

Козодаев Роман Юрьевич, 2010

4

SolidWorks 2007 в подлиннике — Страница 471

Рассмотрим следующий элемент — Отступ. 5.6.6. ОтстУп Элемент Отступ позволяет создать на твердом теле выступ или выемку, которая по своей форме и конфигурации соответствует элементу-инструменту. Материал детали …

Дударева Н.Ю., 2007

5

Типографика. Шрифты. Верстка. Дизайн. 2 изд. — Страница 256

Четыре основных вида отступов. Постоянный отступ отодвигает совокупность строк от одного или обоих полей на одинаковое расстояние. Абзацный отступ обычно является указателем нового абзаца. В обратном отступе …

6

HTML 5 и CSS 3: Современный Web-дизайн — Страница 151

ГЛАВА. 11. Отступы,. рамки. и. выделение. В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых …

Дронов Владимир Александрович, 2011

7

InDesign СS3 для Windows и Мacintosh — Страница 1100

Установка отступов Текст не обязательно долженрасполагаться по всей ширинетекстового фрейма. Вы можете выделить абзац из текста, задав отступ отлевой или правой границы фрейма для всех строк абзаца, или облегчить …

Сэнди Коэн, 2013

8

Adobe FrameMaker. Сложная верстка — Страница 119

Горизонтальные отступы отсчитываются от границ текстового блока или колонки; вертикальные, которые иногда называют отбивками, — от соседних абзацев. Первая строка может иметь дополнительный отступ, который …

Аркадий Божко, 2013

9

Современный самоучитель работы на компьютере — Страница 306

На линейке имеется четыре бегунка, верхний из которых называется Отступ первой строки, нижний левый — Отступ слева (он же — Выступ, в зависимости от того, какую часть этого сдвоенного бегунка вы используете) а нижний …

Юстас Эклер, 2014

10

Подготовка сложных документов в FrameMaker — Страница 122

Первая строка может иметь дополнительный отступ, который называется красной строкой, реже – абзацным отступом или просто абзацем. Красная строка – это простейший дизайнерский прием, сохранившийся со времен …

Аркадий Божко, 2014

НОВОСТИ, В КОТОРЫХ ВСТРЕЧАЕТСЯ ТЕРМИН «ОТСТУП»

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

18:03 Вопрос отклонения от предельных параметров …

… застройки от красной линии Рижского проспекта – 2,5 м.; минимальный отступ от границы земельного участка, границы которого не установлены (по … «Псковская Лента Новостей, Окт 15»

В Железногорске обещали строить не такой магазин

Согласно утвержденным городским Правилам благоустройства, минимальный отступ объекта строительства от границы участка — три метра. «Эхо недели, Окт 15»

ЗАКЛЮЧЕНИЕ О РЕЗУЛЬТАТАХ ПУБЛИЧНЫХ СЛУШАНИЙ

Атарбекова, 38/1,38/2 в Прикубанском внутригородском округ города Краснодара – для реконструкция здания рынка, без отступов от границ … «Краснодарские известия, Окт 15»

Анонс Sharp Aquos Zeta, Compact и Disney: сверхбыстрые …

Большой отступ снизу, за который часто ругают Sharp, никуда не делся. Зато компания отказалась от использования перегревающегося чипсета … «Mobiltelefon.Ru, Сен 15»

Hisense Vidaa Mirror Tablet: безрамочный планшет с Quad HD …

В отличие от большинства компактных планшетов, имеющих вокруг экрана немаленькие рамки, у этого китайца отступы минимизированы. Отступ есть … «Mobiltelefon.Ru, Авг 15»

Украина отказалась от соблюдения прав человека в зоне АТО

… для отпора вооруженной агрессии РФ, Украине необходимо осуществить временный отступ от обязательств, — говорится в пояснительной записке. «Интернет-газета «Вести», Май 15»

Возле Омского музея просвещения может появиться офисный …

С просьбой уменьшить отступ красной линии дороги до нуля метров до проектируемого здания обратился местный предприниматель Владимир … «Омский портал недвижимости, Дек 14»

Напротив омской картографической фабрики построят торговый …

С просьбой уменьшить минимальный отступ от красной линии до проектируемого здания заявилась одна из жительниц Омска. Женщина планирует на … «Омский портал недвижимости, Дек 14»

В Кировском районе частный конный клуб оказался под угрозой …

Да, мы построили с отступом полметра. Причем у вас неровно стоит гараж. То есть, там у нас 70 сантиметров стоит, а здесь 30. Татьяна утверждает: … «Rifey, Дек 14»

Точечной застройки в Новосибирске больше не будет без …

Эти нормы позволяли застройщикам не определять минимальные отступы от границ земельного участка, за пределами которого запрещено … «Сиб.фм, Сен 14»

Text Indent — Tailwind CSS

​Основное использование

​Добавление текстового отступа

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

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

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

​Использование отрицательных значений

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

  <дел>
  Так я начал ходить в воду. Я не буду лгать...

​Применение условно

​Наведение курсора, фокус и другие состояния

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

  <дел>
  

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

​Точки останова и медиа-запросы

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

  <дел>
  

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


​Использование пользовательских значений

​Настройка темы

Масштаб отступа текста по умолчанию основан на масштабе интервалов по умолчанию.Вы можете настроить шкалу интервалов, отредактировав theme.spacing или theme.extend.spacing в файле tailwind.config.js .

  модуль.экспорт = {
  тема: {
    продлевать: {
      интервал: {
        «128»: «32 бэр»,
      }
    }
  }
}
  

Кроме того, вы можете настроить только масштаб текста, отредактировав theme.textIndent или theme.extend.textIndent в файле tailwind.config.js .

  модуль.экспорт = {
  тема: {
    продлевать: {
      отступ текста: {
        «128»: «32 бэр»,
      }
    }
  }
}
  

Узнайте больше о настройке темы по умолчанию в документации по настройке темы.

Произвольные значения

Если вам нужно использовать одноразовое значение text-indent , которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету, используя любое произвольное значение.

  <дел>
  

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

отступ текста — Codrops

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

Объем пространства определяется относительно левого края (или правого края в макетах справа налево) блочного элемента, содержащего текст. Направление текста определяется свойством direction .

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

Поскольку свойство text-indent каскадно, при указании на блочном элементе оно повлияет на дочерние встроенные блочные элементы. По этой причине часто целесообразно указывать text-indent: 0 для элементов, которые указаны display: inline-block .

Общая информация и заметки

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

Только абзацы, следующие за другими абзацами, обычно имеют отступ. Первый абзац страницы не должен иметь отступ, как и абзацы, следующие за диаграммой, заголовком или чем-то еще, что смещено от текста.На самом деле правила очень просты:

п {
  нижняя граница: 0;
}

/* Селектор соседних элементов используется для выбора всех абзацев, следующих непосредственно за абзацем */
р + р {
  отступ текста: 1.5em;
  поле сверху: 0;
}
                 

Свойство text-indent также используется в методах замены изображения, чтобы скрыть текст (в основном заголовки) и показать графическое представление этого текста на его месте.Вы можете прочитать больше о методах замены изображений в статье «Девять методов замены изображений CSS на CSS-трюках».

Значения

<длина>
Текст имеет отступ на фиксированное значение, указанное как .
<процент>
Текст имеет отступ на величину, которая представляет собой процент от ширины содержащего блока.
подвесной (экспериментальный)
Это значение инвертирует строки с отступом: все строки , кроме первой строки, имеют отступ, поэтому похоже, что первая строка получила отрицательное значение отступа. Это «флаг», который используется вместе со значением длины.
для каждой строки (экспериментальная)
Отступ влияет на первую строку блочного контейнера, а также на каждую строку после принудительного разрыва строки (с использованием
), но не влияет на строки после мягкого переноса.Это также флаг, который используется вместе со значением длины.

Примечания

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

Библиографии обычно пишутся с использованием висячих отступов, где первая строка доходит до левого поля, а остальная часть статьи имеет отступ. В последнее время такого рода вещи также называют «аутдентом».Пример висячего отступа можно увидеть на следующем изображении:

Изображение, показывающее разницу между обычным и выступающим текстовым отступом.

Примеры

Следующий пример вызывает отступ текста 3em для всех абзацев на странице.

п {
    отступ текста: 3em;
}
                 

Поддержка браузера

Свойство text-indent поддерживается во всех основных браузерах.

Примечания

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

В непрерывном тексте отмечайте все абзацы после первого с отступом не менее одного en

«Орнаменты […] отбрасываемые строки […] отступы от абзацев […] и другие имеют свое применение, но самый простой, безошибочный, но ненавязчивый способ маркировки абзацев — это простой отступ.

Отступ первой строки абзаца или любого блочного элемента достигается в CSS с помощью свойства text-indent:

  р {
  отступ текста: 1em;
}  

Предыдущее правило устанавливает отступ для каждого абзаца, однако мы хотим делать отступ только для тех абзацев, которые следуют за другим абзацем. Для этого можно использовать соседний одноуровневый селектор ( + ):

.
  р + р {
  отступ текста: 1em;
}  

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

  р {
  нижняя граница: 0;
}
р + р {
  отступ текста: 1em;
  поле сверху: 0;
}  

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

Следует отметить, что Internet Explorer 6 не поддерживает селектор соседнего брата и сестры. В приведенных выше примерах IE 6 абзацы не будут иметь отступ, вместо этого абзацы будут помечены разрывом строки.

Отступ — не единственный способ обозначить абзац. Многие альтернативы включают в себя: простые блочные абзацы, выступы, орнаментированные отступы, орнамент в непрерывном потоке или дропы.

Блокировать абзацы

Как указывалось ранее, блочные абзацы — абзацы, разделенные разрывами строк, — это метод, используемый веб-браузерами по умолчанию.Как объяснялось в §2.2.2, поля, разделяющие абзацы, должны быть установлены равными высоте строки, чтобы сохранить ритм текста.

Выступ

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

  р {
  нижняя граница: 0;
}
р + р {
  отступ текста: -1.5em;
  поле сверху: 0;
}  

Украшения

Орнаментированный отступ, в отличие от стандартного отступа, не обязательно требует использования text-indent для достижения основного эффекта (хотя это может способствовать ясности).Ключом к достижению этого эффекта является использование псевдоэлемента CSS 2.1 :before для указания орнамента. В следующем примере цветочное сердце будет вставлено в начало следующего абзаца:

.
  р {
  нижняя граница: 0;
}
р + р: перед {
  содержание: "2767";
  отступ-справа: 0.4em;
  поле сверху: 0;
}  

В приведенном выше примере применение текстового отступа к абзацу приведет к тому, что орнамент будет сдвинут с первой строки абзаца; чтобы отделить орнамент от контента, к сгенерированному контенту был применен padding-right .

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

  p { display: inline; }
р + р: перед {
  содержание: "2761";
  отступ-справа: 0.1em;
  отступ слева: 0.4em;
}  

Следует отметить, что вышеупомянутые правила для орнаментов не будут работать в Internet Explorer (до версии 7 на момент написания), поскольку он не поддерживает свойство content CSS .Кроме того, Firefox для Windows (на момент написания статьи тестировался на XP SP2) будет отображать только те орнаменты, которые содержатся в текущем шрифте. По сути, эти ограничения подразумевают, что в настоящее время нельзя полагаться на вышеупомянутую технику для работы на машинах Windows. Альтернативными методами могут быть использование вместо этого фонового изображения или включение в код реальных изображений, размер которых, если они указаны в ems, будет изменяться пропорционально тексту.

Линии сброса

Абзацы Dropline начинаются на одну строку ниже, в горизонтальном месте на странице, где заканчивался предыдущий абзац.В отличие от других упомянутых стилей, абзацы перетаскивания для длинных фрагментов текста невозможно добиться последовательно в CSS без непомерно длинных файлов CSS или (предпочтительно) с помощью JavaScript.

Метод, который можно применить, аналогичен методу, используемому для непрерывного потока текста, в том смысле, что он использует display:inline для достижения горизонтального позиционирования. После того, как абзацы расположены горизонтально, относительное верхнее положение, равное высоте строки, применяемой к последующим абзацам, может создать желаемое вертикальное позиционирование (и, таким образом, полный эффект перетаскивания):

  р {
  дисплей: встроенный;
  положение: родственник;
}
р + р { сверху: 1.3эм; }  

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

  р {
  дисплей: встроенный;
  положение: родственник;
}
р + р { верх: 1.3em; }
р + р + р { верх: 2.6эм; }
р + р + р + р { верх: 3.9em; }  

Задание верхних позиций таким образом явно громоздко и вполне разумно для реализации в JavaScript.

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

Ваш адрес email не будет опубликован.