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

Отступ первой строки (свойство text-indent) | CSS

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

Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

Красная строка в HTML: как сделать отступ первой строки абзаца

Разбивать текст на абзацы следует с помощью тега <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 элементов отсутствует отступ слева до содержимого.

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

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

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

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

text-indent

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

Синтаксис

text-indent: <значение> | <проценты> | inherit

Значения

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

WordPress: Отступы в абзацах

Попросили меня на одном сайте сделать отступы в абзацах, для "читабельности текста". Проблема в том, что по умолчанию на wordpress-сайтах первая строка абзаца без отступов и в стандартном текстовом редакторе нет возможности сделать отступ именно первой строки абзаца.

Как сделать в WordPress отступы в абзацах? Мне пришли в голову три варианта выхода из ситуации:

  • При редактировании текста переходить с режима "Визуально" в режим html-редактирования "Текст" и прописывать в начале абзаца несколько символов неразрывного пробела — "&nbsp;". Мне этот вариант не понравился, не удобно, плюс придется на всех страницах с готовым текстом редактировать абзацы.
  • Найти плагин не стандартного редактора для wordpress, в котором есть возможность делать такие отступы в абзацах. Этот вариант я также откинул, так как не хотелось заниматься редактированием уже написанного текста, помимо того что такой плагин нужно было еще найти.
  • И третий вариант — редактирование css. Для этого нужно посмотреть в каком div-блоке размещается контент записей/страниц и прописать отступ для html-тега абзаца "<p>" в этих блоках. Этот вариант мне понравился больше всего — он наименее трудоемкий, плюс даже не нужно будет заниматься редактированием уже опубликованного текста.

Опишу по подробней последний вариант.

Как узнать в каком div-блоке находиться текст? В браузере chrome нажимаем правой кнопкой мыши на любом нужном абзаце и в контекстном меню выбираем пункт "Просмотр кода элемента", и возюкаем мышкой снизу вверх по раскрывшимся div-блокам. Когда на странице подсветится именно та область в которой находиться только содержимое ваших записей — то это и есть тот div-блок. На текущем блоге это был <div >, на сайте клиента это был <div >.

Где и как редактировать css-файл? В админке WordPress переходим в "Темы -> редактор", в правом верхнем углу выбираем нужную тему и в правом меню-списке-файлов выбираем файл "style.css". В этом файле прописываем следующий код, покажу на примерах:

Для <div class="entry"> добавляем строку: .entry p

Для <div id="right"> добавляем строку: #right p

Обратите внимание, если у вас div class, то строка начинается с точки, если у вас div id, то строка начинается с решетки.

Вот и все — жмем "обновить файл". Если сделано все правильно, то все абзацы на сайте в указанных блоках будут с отступом.

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

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