CSS/Свойство text-indent
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
text-indent: <длина> | <процент> | inherit
Описание
Свойство text-indent (от англ. «text indent» ‒ «отступ текста») определяет отступ перед первой форматируемой строкой (красной строкой) в блочном контейнере.
| Применяется: | к блочным контейнерам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | относительно ширины блочного родительского элемента; |
| Медиа: | визуальные. |
Примечание
- До CSS 3.0 данное свойство влияет только на первую форматируемую строку элемента. То есть, например, отступ не вставляется в середину элемента, который был разбит другим элементом (например, таким как «br» в HTML).
- Поскольку свойство «text-indent» наследуется, то оно будет влиять на вложеные встроено-блочные элементы. По этой причине, зачастую разумней указывать «
text-indent: 0» для элементов, которые определены как «display:inline-block».
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.[1]
Firefox
Поддерж.[1]
Opera
Поддерж.[1]
Maxthon
Поддерж.[1]
IExplorer
Поддерж.[1]
Safari
Поддерж.[1]
iOS
Android
Поддерж.[1]
- [1] ‒ поддерживает синтаксис CSS 1-2.2.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5. 4.7 ‘text-indent’ | Перевод |
| 2 | 16.1 Indentation: the ‘text-indent’ property | |
| 2.1 | 16.1 Indentation: the ‘text-indent’ property | |
| 2.2 | 16.1 Indentation: the ‘text-indent’ property | |
| 3 | 9.1. First Line Indentation: the ‘text-indent’ property | |
Значения
- <длина>
- Задаёт отступ фиксированной длины.
text-indent: 1.5em; - <процент>
- Процент от ширины содержательного блока.
text-indent: 12%; - each-line
- Отступ влияет на первую строку блока-контейнера, а также на каждую строку после принудительного разрыва строки, но не влияет на строки после разрыва по символу мягкого переноса.
- hanging
- Инвертирует то на какие строки влияет.
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «0».
Примечание: допускаются отрицательные значения, но при этом в конкретной реализации могут существовать определённые ограничения. Если значение данного свойства является отрицательным или превышает ширину блока, то текст первой строки может выходить за пределы блока. При этом будет ли отображаться текст выходящий за пределы блока зависит от свойства «overflow».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-indent</title>
<style type=»text/css»>
blockquote { text-indent: 2em; }
</style>
</head>
<body>
<h2>Красная строка</h2>
<div>
<blockquote>Есть лица, которые существуют на свете не как предмет, а как посторонние крапинки или пятнышки на предмете.
<p><b>Н.В. Гоголь</b>, «Мёртвые души»</p>
</div>
</body>
</html>
Свойство text-indent
Красная строка.Оформляем отступ в HTML
При оформлении тех или иных текстов или даже таблиц веб-мастерам приходится сталкиваться с такой проблемой, как оформление красных строк, отступов в тексте. Казалось бы, все довольно просто — скопировать текст в нужное поле, и отступы будут оформлены автоматически. Но, к сожалению, не все так просто. Поэтому давайте разберемся, как правильно отформатировать текст, чтобы он смотрелся красиво и эффектно, и узнаем, как можно оформить отступ в HTML.
Способ первый
Начнем с наиболее простого, но в тоже время трудоемкого оформления отступов.
Для решения данной проблемы используем код пробела — . Использовав его в начале абзаца несколько раз, вы получите нужный вам отступ.
Преимущества данного способа в том, что данный код читается любым браузером. Недостаток один — придется долго и нудно вставлять пробелы в выбранный вами текст. Такой способ подходит тем, кто только начинает свое знакомство с HTML. Отступы в таблице также можно сделать таким способом.
HTML-теги для текста: выравнивание, размер, шрифт
Подробное руководство по форматированию текста в HTML. Основные теги, их предназначение и синтаксис.
Способ второй
Второй способ — оформить отступ с помощью парного тэга <blockquote. Для этого нужно заключить текст, который вам нужно отформатировать, между открывающим и закрывающим тэгом.
Легче, чем в первом случае. Но вот беда, данный тэг делает отступ только на 40 пикселей, кроме того, при его использовании отступ задается не только слева, но и справа, сверху и даже снизу.
Для текста не всегда красиво, для таблицы такой способ сделать отступ в HTML будет намного эффективнее.
Если хотите красиво выделить блок информации — данный тэг подойдет, если же нет — советуем воспользоваться первым способом или же посмотреть оставшиеся два.
Способ третий
Подставляем слово, буквы которого имеют одинаковый цвет с фоном, то есть в начале каждого абзаца вставляем слово-невидимку. Таким образом легко сделать отступ. HTML позволяет написать один раз специальный код и вставлять его в начале каждого абзаца.
Узнаем как ставить пробел html
Очень часто новички веб-программирования задают один и тот же вопрос: «Как сделать множественный…
Да, решение неплохое, но что, если ваш сайт имеет фоновый рисунок или картинку? Такой способ тут не подойдет. Да и к тому же при выделении данное слово будет видно. А еще вспомним о том, что данный код будет доступен всем пользователям Интернета. В таком случае, просмотрев исходный код вашей страницы, пользователи могут остаться в недоумении.
Поэтому все же советуем использовать специальные тэги для оформления отступов. Также отметим, что такой вариант оформления не совсем подойдет для таблиц, хотя и может быть использован для форматирования текста.
Способ четвертый
И, наконец, последний способов сделать отступ текста. В HTML это можно осуществить с помощью двух простых тэгов. И наиболее простой способ сделать абзац — использовать связку из двух тэгов — < br > < dd >.
Первый тэг переносит текст на новую строку, формируя абзац. Второй же служит табулятором, то есть выставляет красную строку. Как видите, все довольно просто и понятно. К тому же такая запись будет понятна большинству пользователей, заглянувших на ваш сайт и заинтересовавшихся его кодом.
Использовать данное сочетание легко, хотя и его придется вставлять в начало каждого абзаца вручную. Но что поделать, далеко не все редакторы обладают способностью красиво и правильно оформлять текст.
Нужен ли тэг абзаца?
Напоследок поговорим немного о тэге < p >.
Обычно он употребляется для того, чтобы определить в тексте начало нового абзаца. Правда, при использовании данного тэга не сохраняется красная строка в абзаце, но зато появляется отступ между абзацами.
Применение CSS по центру: текст и таблица
Оформление элементов HTML страницы удобнее всего выполнять чистым CSS стилем. Знание правил и…
В большинстве европейских стран данное оформление является общепринятым, но устраивает ли оно нас? Все мы привыкли к наличию красных строк и довольно часто задаемся вопросом о том, как оформить отступ в HTML, к тому же не всегда удобно читать текст, отформатированный таким образом.
Если вы хотите сделать текст более привычным и легким для восприятия, советуем отказаться от тэга < p >, и заменить его на связку < br > < dd >. Поверьте, это будет намного красивее и изящнее, чем наличие пустых строк между абзацами. Да и так вы сможете сэкономить место на экране.
Выводы
Итак, мы с вами научились оформлять отступы.
Как оказалось, это не так сложно. Главное – знать несколько полезных тэгов и кодов, а также иметь запас терпения и свободное время для того, чтобы расставить их.
Сделать отступ в HTML можно несколькими способами. Мы с вами разобрали каждый из них, выделили их преимущества и недостатки. Также поговорили о том, что тэг < p > далеко не всегда так полезен, как нам бы хотелось.
Абзац HTML и отступ первой строки
- Абзацы
- Отступ первой строки
Абзацы
Любой текст имеет свою уникальную структуру: книги делятся на части, разделы и главы, газеты и журналы имеют отдельные рубрики и подзаголовки, в которые в свою очередь включаются фрагменты текста, также имеющие свою структуру: абзацы, отступы и др.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую структуру, понятную каждому пользователю. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит очень многое: в первую очередь, какое впечатление о вашем сайте сложится у посетителя.
Для создания структурных единиц текста, например абзацев, в документах HTML используется тег
Абзац
Примечание: по умолчанию интервал между абзацами равен 1em (em — единица измерения, равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Не забывайте о закрывающем теге
Большинство браузеров корректно отобразят HTML-документ, даже если вы забыли о закрывающем теге.
Абзац
Еще один абзац
Этот код будет работать в большинстве браузеров, но не полагайтесь на него. Забытый закрывающий тег может привести к неожиданным результатам.
Отступ первой строки
Первая строка является начальной строкой абзаца. Чтобы сделать отступ первой строки к вашим абзацам, вам нужно использовать свойство CSS
<голова>
<мета-кодировка="utf-8">
Название страницы
<стиль>
р {текстовый отступ: 25px; }
<голова>
<тело>
Как и в любом настоящем искусстве, в хороших текстах нет банальностей,
на что некоторые также ссылаются на красную линию, учитывая, что ее использование
не так важно.
Однако надо понимать, что любая запятая несет в себе как эстетическую
и смысловая нагрузка, и не только это дань правилам грамматики касается
и форматирование.
Попробуйте »
В приведенном выше примере первая строка каждого абзаца на странице будет начинаться с отступа 25px . В приведенном ниже примере показано, как можно указать отступ только для определенного абзаца на странице:
Как и в любом настоящем искусстве, в хороших текстах нет банальностей, на что некоторые ссылаются и на красную линию, считая, что ее использование не столь важно. Однако надо понимать, что любая запятая несет в себе как эстетическое, так и и смысловая нагрузка, и не только это дань правилам грамматики проблемы и форматирование.
Попробовать »
Примечание: не обязательно устанавливать размер отступа в 25px , оптимальный размер отступа можно подобрать самостоятельно, также с помощью свойства text-indent можно сделать выступающий над остальными текстовой строки, необходимо установить для свойства отрицательное значение (например: -30px ).
С этой темой смотрим:
- Заголовки, строки и комментарии
- Линия разрыва
- Теги форматирования текста
- Выравнивание текста CSS по горизонтали
- CSS изменить шрифт
- Стиль и размер шрифта CSS
Как сделать отступ элементов списка с помощью CSS, если у вас есть плавающие блоки?
спросил
Изменено 2 года, 7 месяцев назад
Просмотрено 2к раз
Я заметил относительно странное поведение при использовании плавающих изображений в документе. Отступ элементов списка сделан относительно «красной линии» вместо «зеленой».
Почему это происходит и можно ли это решить?
<изображение>какой-то текст
<ул>
другой текст
- css
- html-списки
Просто добавьте ul { list-style-position: inside; } , потому что по умолчанию он установлен снаружи, не знаю почему.
1
Я думаю, вам, вероятно, нужно изменить позицию стиля списка на внутри .
Комбинированный ответ из нескольких вещей, которые мне удалось откопать, чтобы заставить эту работу работать.
HTML:
Это испытание чего-то с чем-то, что можно сделать Это испытание чего-то с чем-то, что можно сделать Это испытание чего-то с чем-то, что можно сделать
<ул>
МЕНЬШЕ:
изображение {
плыть налево;
}
ул {
позиция стиля списка: внутри;
ли {
положение: родственник;
слева: 1эм;
нижняя граница: 1em; поле слева: -1em;
отступ слева: 1em;
отступ текста: -1em;
}
}
1
Это сработало для меня, из: http://enarion.
net/news/2012/css-perfect-indented-line-ulli-around-a-floating-image/
Chrome, Firefox и т. д.:
ul { list-style-position:inside; поле слева: 2px; дисплей: таблица; }
ул ли {поле слева: 13px; отступ текста: -12px; }
Internet Explorer:
На элементе ul можно использовать overflow: hidden; , чтобы отображение было больше похоже на блок, а не просто на текст, и padding-left: 1em; , чтобы нажать его с левой стороны.
.изображение {
плыть налево;
ширина: 50%;
высота: 200 пикселей;
цвет фона: серый;
поле справа: 20px;
нижняя граница: 20px;
}
ул {
отступ слева: 1em;
переполнение: скрыто;
} <дел> <р> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales sodales facilisis. Ut a risus vitae massa scelerisque elementum. Quisque finibus posuere tempus.
Suspendisse rutrum quam faucibus, tincidunt neque vitae, porttitor urna. <ул>