Css отступ текста от текста: text-indent | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Отступ текста — Tailwind CSS

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

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

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

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

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

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

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

<div>
  Итак, я пошел в воду. Я не буду лгать...
</div>

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

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:indent-8 to only apply the indent-8 utility on hover.

<div>
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:indent-8 to apply the indent-8 utility at only medium screen sizes and above.

<div>
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

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

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

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

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

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

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      textIndent: {
        '128': '32rem',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

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

If you need to use a one-off text-indent value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div>
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

Отступы. HTML, XHTML и CSS на 100%

Отступы. HTML, XHTML и CSS на 100%

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

Содержание

Отступы

Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы.

Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.

Зададим в нашем примере отступ 25 пикселов (рис. 8.9):

p {

text-indent: 25px;

}

Рис. 8.9. Задание отступа 25 пикселов

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

Данный текст является ознакомительным фрагментом.

9.6. Поля и отступы

9.6. Поля и отступы В этом разделе мы разберем важный момент при создании веб-страниц – задание полей и отступов. Итак, начнем с

Поля страницы и отступы

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

Отступы

Отступы Для выравнивания текста и введения отступов используются символы табуляции. Размер одного символа табуляции при отображении соответствует восьми позициям. Это не означает, что для структурирования можно использовать восемь или четыре символа «пробел» либо

ГЛАВА 11. Отступы, рамки и выделение 

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

ГЛАВА 11.

Отступы, рамки и выделение

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

Отступы в программе

Отступы в программе Запомните: следует выработать правила использования отступов и неуклонно их придерживаться. Компилятор VBA игнорирует все пробелы в начале строк, так что вы можете смело использовать отступы для наведения порядка. Сравните следующие два фрагмента

Автоматические отступы

Автоматические отступы Чтобы до минимума уменьшить объем выполняемой вами работы, редактор Visual Basic автоматически устанавливает отступ в новой строке, равный отступу в предыдущей. Если в новой строке отступ должен быть меньше, просто нажмите клавишу удаления символа

Используйте отступы!

Используйте отступы! Правильное использование отступов служит основой создания понятного программного кода. В примере из предыдущего раздела каждая пара операторов, определяющих одну структуру, напечатана с одним и тем же отступом. При наличии отступов проще выяснить,

Отступы и выступы

Отступы и выступы Отступ – это расстояние между текстом и левым или правым полем страницы. Регулировать отступ можно вручную при помощи горизонтальной линейки (как включить отображение, читайте в подразд. «Линейка» разд. 1.4).Отступы можно разделить на три вида:• отступ

CSS: свойство text-indent

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием text-indent с синтаксисом и примерами.

Описание

Свойство CSS text-indent определяет величину отступа перед первой строкой текста элемента.

Синтаксис

Синтаксис свойства CSS text-indent:

 text-indent: value;

Параметры или аргументы

значение

Расстояние по горизонтали (т.е. отступ) перед первой строкой текста элемента. Это может быть одно из следующих значений:

.

Значение Описание
фиксированный Фиксированное значение, выраженное в пикселях, em и т. д.
p { text-indent: 40px; }
p { text-indent: 3em; }
процент Процентное значение
p { text-indent: 10%; }

Примечание

  • Свойство text-indent позволяет вам определить расстояние по горизонтали (то есть слева направо), которое будет отображаться перед первой строкой текста элемента.
  • Когда значение предоставляется в процентах, оно относится к ширине содержащего блока.

Совместимость с браузерами

Свойство CSS text-indent имеет базовую поддержку со следующими браузерами:

  • Хром
  • Firefox (Геккон)
  • Internet Explorer (IE)
  • Опера
  • Сафари (веб-кит)

Пример

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

Использование фиксированного значения

Давайте рассмотрим пример отступа текста в CSS, где мы указали отступ текста как фиксированное значение, выраженное в пикселях.

CSS будет выглядеть так:

 div { фон: светло-желтый; отступ: 10 пикселей; }
р {текстовый отступ: 25px; }

HTML будет выглядеть так:

 

  
TechOnTheNet.com предоставляет полезные справочные материалы, инструкции и часто задаваемые вопросы с 2003 года. 

  
На сайте CheckYourMath.com есть ответы на ваши повседневные вопросы по математике.

Результат будет выглядеть следующим образом:

В этом примере CSS text-indent мы установили text-indent на 25px для тега

. Это приведет к отступу первой строки текста для каждого абзаца на 25 пикселей.

Мы также можем выразить text-indent как фиксированное значение в em. Таким образом, используя тот же HTML-код, мы можем изменить наш CSS следующим образом:

 div { background: lightyellow; отступ: 10 пикселей; }
р {текстовый отступ: 5em; }

Теперь результат будет выглядеть следующим образом:

В этом примере CSS text-indent мы установили для тега

текстовый отступ в 5em, что выглядит как немного больший отступ, чем 25px. Отступ текста применяется к первой строке текста каждого абзаца.

Использование процента

Давайте посмотрим на пример отступа текста в CSS, где мы указали отступ текста в процентах.

CSS будет выглядеть так:

 div { background: lightyellow; отступ: 10 пикселей; }
p {текстовый отступ: 5%; }

HTML будет выглядеть так:

 

  
TechOnTheNet.com предоставляет полезные справочные материалы, инструкции и часто задаваемые вопросы с 2003 года.

  
На сайте CheckYourMath.com есть ответы на ваши повседневные вопросы по математике.

Результат будет выглядеть следующим образом:

В этом примере CSS text-indent мы установили text-indent тега

на 5%, что означает, что text-indent будет равен 5% ширина контейнера для первой текстовой строки каждого из абзацев.

Отступ текста CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

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

— CR

  • Глобальное использование
    10,09% + 88,99% знак равно 99,08%

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

Хром
  1. 4–37: Частичная поддержка
  2. 38–107: Частичная поддержка
  3. 108: Частичная поддержка
  4. 109–111: Частичная поддержка
    5. 15
    Кромка 167 12 — 18: Partial support
  5. 79 — 107: Partial support
  6. 108: Partial support
Safari
  1. 3.1 — 15.6: Partial support
  2. 16.0 — 16.1: Supported
  3. 16.2: Supported
  4. 16.3 — TP: поддержан
Firefox
  1. 2 — 107: Частичная поддержка
  2. 94% — Partial support»> 108: Частичная поддержка
  3. 109 — 110: частичная поддержка
Opera
    9059
Opera
  1. 999999999999999999
  2. 999999
  3. 99999
  4. 9999
  5. 999
  6. 9
  9. 9019
  10. 9019
  12. 9019 9019 9019 9019 9019 9019 9019 9019 9019 9019:
.0201 25 — 91: Частичная поддержка
  • 92: Частичная поддержка
    • IE
    1. 17% — Partial support»> 5,5 — 10: частичная поддержка
    2. 11: частичная поддержка
    Chrome для Android
      для Android
        9
      для Android
        9
      9018:

      3

      3. IOS

      1. 3,2 — 15,6: Частичная поддержка
      2. 16,0 — 16,1: Поддержано
      3. 16,2: Поддержано
      4. 16,3: Поддержанный
      Samsung Internet
        Samsung Internet

          63

          Samsung Internet
            444999 4 -й.
          1. 5 — 18,0: Частичная поддержка
          2. 19,0: Частичная поддержка
          Opera Mini
          1. Все: частичная поддержка
          Opera Mobile

            10- 12,144.

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

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