Обратный абзацный отступ, называемый также втяжкой, — сдвиг начала первой строки абзаца влево по отношению к остальным его строкам. Другими словами, у первой строки абзаца есть отрицательный отступ, и именно таким образом этот эффект создается с помощью кода 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:

p {
        text-indent: -4em;
}

Мы сразу столкнемся с проблемой: селектор элемента задаст такой внешний вид всем абзацам. Нам нужно ограничить область применения стилей только первым абзацем. Самый простой способ сделать это — использовать селектор 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

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

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