Css отступ между абзацами: Как изменить расстояние между абзацами текста?

Содержание

Измените расстояние между строками и абзацами текста.

01.04.2020 Оставить комментарий 444 Просмотров

После вопроса полученного только вчера, я подумал, у меня есть что предложить блогерам, которые хотят более глубже познакомиться с языками HTML и CSS. Как установить соотношение между различными строками текста и между абзацами. Тег line-height, который определяет высоту строки, используется для этого параметра, но может использоваться разными способами и для разных нужд. Это расстояние в типографии называется универсально интерлиньяж.

Расстояние между строками и абзацами текста.

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

Изменить высоту между строк в шаблоне

Если вы намерены изменить расстояние между строками на всех страницах блога, то вы обязательно должны работать в шаблоне. После сохранения шаблона перейдите на Тема> Изменить HTML и найти блок с кодом .post-body, используя Ctrl + F. Вы видите код, который в некотором роде будет иметь структуру, подобную этой

.post-body { font-size: 110%; line-height: 1.4; position: relative;}

Этот код с размером шрифта: 110%; устанавливает шрифт текста на 110% от текста по умолчанию, а высота строки: 1.4; эквивалентно высоте строки:1.4em; и устанавливает высоту строки в 1,4 раза, что от размера шрифта. Высота линии также может быть задана в пикселях, таким образом line-height:20 px; и он будет отключен от размера шрифта, Однако ссылка на размер шрифта необходима, когда, например, абзац публикуется с очень большими шрифтами, поскольку в противном случае строки могут перекрываться.

это дает результат согласно следующему скриншоту.

Просто измените значение параметра line-height, чтобы изменить расстояние между линиями.

Как установить расстояние между отдельными абзацами

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

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

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

Как установить расстояние для всех абзацев сообщения

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

</p

что приведет к такому результату

Чтобы изменить шаблон, перейдите в Тема> Редактировать HTML, найдите строку </b:skin> и, чуть выше, вставьте эту строку кода

.post-body p {margin-bottom:-8px;}

Сохранить шаблон. Результат будет следующим

Очевидно, что числовые данные -8px могут быть изменены. Также необходимо, чтобы абзацы были определены с помощью тега  и не использовали переход на новую строку  .

Предыдущий Вставить код HTML, публикуемый в сообщениях.

Следующий Blogger: продвинуть блог в первую десятку результатов поиска Google

Ознакомьтесь также

Когда вы загружаете из Интернета такие файлы, как изображения, документы и т. Д., Они рассматриваются …

Форматирование абзацев в Illustrator

Руководство пользователя Отмена

Поиск

Руководство пользователя Illustrator
Основы работы с Illustrator
1. Введение в Illustrator
  1. Новые возможности в приложении Illustrator
  2. Часто задаваемые вопросы
  3. Системные требования Illustrator
  4. Illustrator для Apple Silicon
2. Рабочая среда
  1. Основные сведения о рабочей среде
  2. Ускоренное обучение благодаря панели «Обзор» в Illustrator
  3. Создание документов
  4. Панель инструментов
  5. Комбинации клавиш по умолчанию
  6. Настройка комбинаций клавиш
  7. Общие сведения о монтажных областях
  8. Управление монтажными областями
  9. Настройка рабочей среды
  10. Панель свойств
  11. Установка параметров
  12. Рабочая среда «Сенсорное управление»
  13. Поддержка Microsoft Surface Dial в Illustrator
  14. Отмена изменений и управление историей дизайна
  15. Повернуть вид
  16. Линейки, сетки и направляющие
  17. Специальные возможности в Illustrator
  18. Безопасный режим
  19. Просмотр графических объектов
  20. Работа в Illustrator с использованием Touch Bar
  21. Файлы и шаблоны
3. Инструменты в Illustrator
  1. Краткий обзор инструментов
  2. Выбор инструментов
    1. Выделение
    2. Частичное выделение
    3. Групповое выделение
    4. Волшебная палочка
    5. Лассо
    6. Монтажная область
  3. Инструменты для навигации
    1. Рука
    2. Повернуть вид
    3. Масштаб
  4. Инструменты рисования
    1. Градиент
    2. Сетка
    3. Создание фигур
  5. Текстовые инструменты
    1. Текст
    2. Текст по контуру
    3. Текст по вертикали
  6. Инструменты рисования
    1. Перо
    2. Добавить опорную точку
    3. Удалить опорные точки
    4. Опорная точка
    5. Кривизна
    6. Отрезок линии
    7. Прямоугольник
    8. Прямоугольник со скругленными углами
    9. Эллипс
    10. Многоугольник
    11. Звезда
    12. Кисть
    13. Кисть-клякса
    14. Карандаш
    15. Формирователь
    16. Фрагмент
  7. Инструменты модификации
    1. Поворот
    2. Отражение
    3. Масштаб
    4. Искривление
    5. Ширина
    6. Свободное трансформирование
    7. Пипетка
    8. Смешать
    9. Ластик
    10. Ножницы
4. Быстрые действия
  1. Ретротекст
  2. Светящийся неоновый текст
  3. Старомодный текст
  4. Перекрашивание
  5. Преобразование эскиза в векторный формат
Illustrator на iPad
1. Представляем Illustrator на iPad
  1. Обзор по Illustrator на iPad.
  2. Ответы на часто задаваемые вопросы по Illustrator на iPad
  3. Системные требования | Illustrator на iPad
  4. Что можно и нельзя делать в Illustrator на iPad
2. Рабочая среда
  1. Рабочая среда Illustrator на iPad
  2. Сенсорные ярлыки и жесты
  3. Комбинации клавиш для Illustrator на iPad
  4. Управление настройками приложения
3. Документы
  1. Работа с документами в Illustrator на iPad
  2. Импорт документов Photoshop и Fresco
4. Выбор и упорядочение объектов
  1. Создание повторяющихся объектов
  2. Объекты с переходами
5. Рисование
  1. Создание и изменение контуров
  2. Рисование и редактирование фигур
6. Текст
  1. Работа с текстом и шрифтами
  2. Создание текстовых надписей по контуру
  3. Добавление собственных шрифтов
7. Работа с изображениями
  1. Векторизация растровых изображений
8. Цвет
  1. Применение цветов и градиентов
Облачные документы
1. Основы работы
  1. Работа с облачными документами Illustrator
  2. Общий доступ к облачным документам Illustrator и совместная работа над ними
  3. Публикация документов для проверки
  4. Обновление облачного хранилища для Adobe Illustrator
  5. Облачные документы в Illustrator | Часто задаваемые вопросы
2. Устранение неполадок
  1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
  2. Устранение неполадок с облачными документами в Illustrator
Добавление и редактирование содержимого
1. Рисование
  1. Основы рисования
  2. Редактирование контуров
  3. Рисование графического объекта с точностью на уровне пикселов
  4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
  5. Рисование простых линий и фигур
  6. Трассировка изображения
  7. Упрощение контура
  8. Определение сеток перспективы
  9. Инструменты для работы с символами и наборы символов
  10. Корректировка сегментов контура
  11. Создание цветка в пять простых шагов
  12. Рисование перспективы
  13. Символы
  14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
2. 3D-объекты и материалы
  1. Подробнее о 3D-эффектах в Illustrator
  2. Создание трехмерной графики
  3. Проецирование рисунка на трехмерные объекты
  4. Создание трехмерного текста
  5. Создание трехмерных объектов
3. Цвет
  1. О цвете
  2. Выбор цветов
  3. Использование и создание цветовых образцов
  4. Коррекция цвета
  5. Панель «Темы Adobe Color»
  6. Цветовые группы (гармонии)
  7. Панель «Темы Color»
  8. Перекрашивание графического объекта
4. Раскрашивание
  1. О раскрашивании
  2. Раскрашивание с помощью заливок и обводок
  3. Группы с быстрой заливкой
  4. Градиенты
  5. Кисти
  6. Прозрачность и режимы наложения
  7. Применение обводок к объектам
  8. Создание и редактирование узоров
  9. Сетки
  10. Узоры
5. Выбор и упорядочение объектов
  1. Выделение объектов
  2. Слои
  3. Группировка и разбор объектов
  4. Перемещение, выравнивание и распределение объектов
  5. Размещение объектов
  6. Блокировка, скрытие и удаление объектов
  7. Копирование и дублирование объектов
  8. Поворот и отражение объектов
  9. Переплетение объектов
6. Перерисовка объектов
  1. Кадрирование изображений
  2. Трансформирование объектов
  3. Объединение объектов
  4. Вырезание, разделение и обрезка объектов
  5. Марионеточная деформация
  6. Масштабирование, наклон и искажение объектов
  7. Объекты с переходами
  8. Перерисовка с помощью оболочек
  9. Перерисовка объектов с эффектами
  10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
  11. Работа с динамическими углами
  12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
  13. Редактирование обтравочных масок
  14. Динамические фигуры
  15. Создание фигур с помощью инструмента «Создание фигур»
  16. Глобальное изменение
7. Текст
  1. Дополнение текстовых и рабочих объектов типами объектов
  2. Создание маркированного и нумерованного списков
  3. Управление текстовой областью
  4. Шрифты и оформление
  5. Форматирование текста
  6. Импорт и экспорт текста
  7. Форматирование абзацев
  8. Специальные символы
  9. Создание текста по контуру
  10. Стили символов и абзацев
  11. Табуляция
  12. Поиск отсутствующих шрифтов (технологический процесс Typekit)
  13. Шрифт для арабского языка и иврита
  14. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
  15. Создание эффекта 3D-текста
  16. Творческий подход к оформлению
  17. Масштабирование и поворот текста
  18. Интерлиньяж и межбуквенные интервалы
  19. Расстановка переносов и переходы на новую строку
  20. Проверка орфографии и языковые словари
  21. Форматирование азиатских символов
  22. Компоновщики для азиатской письменности
  23. Создание текстовых проектов с переходами между объектами
  24. Создание текстового плаката с помощью трассировки изображения
8. Создание специальных эффектов
  1. Работа с эффектами
  2. Стили графики
  3. Атрибуты оформления
  4. Создание эскизов и мозаики
  5. Тени, свечения и растушевка
  6. Обзор эффектов
9. Веб-графика
  1. Лучшие методы создания веб-графики
  2. Диаграммы
  3. SVG
  4. Фрагменты и карты изображений
Импорт, экспорт и сохранение
1. Импорт
  1. Помещение нескольких файлов в документ
  2. Управление связанными и встроенными файлами
  3. Сведения о связях
  4. Извлечение изображений
  5. Импорт графического объекта из Photoshop
  6. Импорт растровых изображений
  7. Импорт файлов Adobe PDF
  8. Импорт файлов EPS, DCS и AutoCAD
2. Библиотеки Creative Cloud Libraries в Illustrator
  1. Библиотеки Creative Cloud Libraries в Illustrator
3. Диалоговое окно «Сохранить»
  1. Сохранение иллюстраций
4. Экспорт
  1. Использование графического объекта Illustrator в Photoshop
  2. Экспорт иллюстрации
  3. Сбор ресурсов и их массовый экспорт
  4. Упаковка файлов
  5. Создание файлов Adobe PDF
  6. Извлечение CSS | Illustrator CC
  7. Параметры Adobe PDF
  8. Палитра «Информация о документе»
Печать
1. Подготовка к печати
  1. Настройка документов для печати
  2. Изменение размера и ориентации страницы
  3. Задание меток обреза для обрезки и выравнивания
  4. Начало работы с большим холстом
2. Печать
  1. Наложение
  2. Печать с управлением цветами
  3. Печать PostScript
  4. Стили печати
  5. Метки и выпуск за обрез
  6. Печать и сохранение прозрачных графических объектов
  7. Треппинг
  8. Печать цветоделенных форм
  9. Печать градиентов, сеток и наложения цветов
  10. Наложение белого
Автоматизация задач
1. Объединение данных с помощью панели «Переменные»
2. Автоматизация с использованием сценариев
3. Автоматизация с использованием операций
Устранение неполадок
1. Проблемы с аварийным завершением работы
2. Восстановление файлов после сбоя
3. Проблемы с файлами
4. Поддерживаемые форматы файлов
5. Проблемы с драйвером ГП
6. Проблемы устройств Wacom
7. Проблемы с файлами DLL
8. Проблемы с памятью
9. Проблемы с файлом настроек
10. Проблемы со шрифтами
11. Проблемы с принтером
12. Как поделиться отчетом о сбое с Adobe
13. Повышение производительности Illustrator

Обзор палитры «Абзац»

Палитра «Абзац» («Окно» > «Текст» > «Абзац») используется для изменения форматирования колонок и абзацев. Если выделен текст или активен инструмент «Текст», для форматирования абзацев также можно использовать параметры на панели «Управление».

Видеоролик с инструкциями по работе со стилями символов и абзацев см. по адресу www.adobe.com/go/vid0047.

Палитра «Абзац» (показаны все параметры)

A. Выравнивание и выключка B. Отступ слева C. Отступ слева для первой строки D. Отбивка перед абзацем E. Расстановка переносов F. Отступ справа G. Отбивка после абзаца

A. Шрифт B. Стиль шрифта C. Размер шрифта D. Выравнивание по левому краю E. Выравнивание по центру F. Выравнивание по правому краю

По умолчанию в палитре «Абзац» видны только наиболее часто используемые параметры. Чтобы вывести все параметры, выберите в меню палитры команду «Показать параметры». Также можно щелкать двойной треугольник на вкладке палитры, чтобы циклически переходить от одного размера отображения к другому.

Выравнивание текста

Текст в области и текст по контуру можно выровнять по одному или обоим краям контура текста.

Выделите текстовый объект или установите курсор на абзаце, который нужно изменить.
Если текстовый объект не выделен или курсор не установлен на абзаце, выравнивание будет применено к новому тексту.
На панели «Управление» или палитре «Абзац» нажмите кнопку выравнивания.

Выключка текста

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

Выделите текстовый объект или установите курсор на абзаце для выключки.
Если текстовый объект не выделен или курсор не установлен на абзаце, выключка будет применена к новому тексту.
В палитре «Абзац» нажмите кнопку выключки.

Настройка межсловного и межбуквенного интервала в выровненном тексте

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

Поместите курсор в тот абзац, который нужно изменить, либо выделите текстовый объект или фрейм, в котором нужно изменить все абзацы.
Выберите пункт «Выключка» в меню палитры «Абзац».
Задайте значения параметров «Межсловные интервалы», «Межбуквенные интервалы» и «Масштаб глифов». Значения «Минимум» и «Максимум» определяют допустимый диапазон интервалов только для абзацев с выключкой. Значение параметра «Желаемые» определяется как для абзацев с выключкой, так и для абзацев без выключки.
Межсловные интервалы
Интервал между словами, появляющийся при нажатии клавиши «Пробел». Значения параметра «Межсловный интервал» могут меняться в диапазоне от 0 % до 1000 %. При значении 100% дополнительный интервал между словами не добавляется.
Межбуквенные интервалы
Расстояние между буквами, включая значения кернинга и трекинга. Значения параметра «Межбуквенные интервалы» могут меняться в диапазоне от -100 % до 500 %. При значении 0 % дополнительный интервал между буквами не добавляется, при 100 % добавляется интервал шириной, равной обычному пробелу.
Масштаб глифов
Ширина символов (глиф — это любой символ шрифта). Значения межглифовых интервалов могут изменяться в диапазоне от 50 % до 200 %.
Совет. Параметры интервалов всегда применяются ко всему абзацу. Чтобы настроить интервалы для нескольких символов, а не для всего абзаца, воспользуйтесь параметром «Трекинг».
Установите параметр «Выключка отдельных слов» (Illustrator) или «Выключка одиночных слов» (InDesign), чтобы указать, как выравнивать однословные абзацы.
В узких столбцах может встретиться строка, содержащая только одно слово. Если абзац настроен на полную выключку, одиночное слово в строке может оказаться слишком растянутым. Вместо того чтобы оставлять подобные слова полностью выключенными, можно выровнять их по центру, по правому или по левому краю.

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

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

Отступы можно задавать с помощью палитр «Табуляция», «Абзац» и панели «Управление». При работе с текстом также можно вводить отступы с помощью табуляторов или изменения отступов для текстового объекта.

Примечание.

Работая с текстом на японском, для установки отступа первой строки вместо палитры «Абзац» можно использовать параметр «модзикуми». Если отступ первой строки задан в палитре «Абзац» и для отступа первой строки задан параметр «модзикуми», общий отступ составляет сумму двух значений.

Установка отступов в палитре «Абзац»

Выберите инструмент «Текст» и щелкните абзац, для которого нужно установить отступ.
Задайте значения отступов в палитре «Абзац». Например, выполните одно из следующих действий:
- Чтобы задать отступ размером в 1 пику для всего абзаца, введите значение 1p в поле «Отступ слева» .
- Чтобы задать отступ размером в 1 пику только для первой строки абзаца, введите значение 1p в поле «Отступ слева для первой строки» .
- Чтобы создать висячий отступ в 1 пику, введите положительное значение (например, 1p) в поле «Отступ слева» и отрицательное (например, 1p) в поле «Отступ слева для первой строки».

Установка отступа с помощью палитры «Табуляция»

Выберите инструмент «Текст» и щелкните абзац, для которого нужно установить отступ.
В палитре «Табуляция» выполните одно из следующих действий с маркерами отступа :
- Чтобы сделать отступ для первой строки текста, перетащите верхний маркер. Чтобы сделать отступ для всего текста, кроме первой строки, перетащите нижний маркер. Чтобы переместить оба маркера и установить отступ для всего абзаца, перетащите нижний маркер с нажатой клавишей «Ctrl» (в Windows) или «Command» (в Mac OS).
Текст с отступом для первой строки абзаца (слева) и без него (справа)
- Чтобы создать отступ для первой строки текста, выберите верхний маркер и введите значение отступа по оси Х. Чтобы переместить весь абзац, кроме первой строки, выберите нижний маркер и введите значение в поле Х.

Создание висячего отступа

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

Текст без отступа (слева) и с висячим отступом (справа)

Выберите инструмент «Текст» и щелкните абзац, для которого нужно установить отступ.
На панели «Управление» или палитре «Табуляция» задайте положительное значение отступа слева.
Чтобы задать отрицательное значение отступа для первой строки абзаца, выполните одно из следующих действий:

Настройка интервалов между абзацами

Установите курсор в абзаце, который нужно изменить, или выделите текстовый объект для изменения всех его абзацев. Если курсор не установлен в абзаце и не выделен текстовый объект, настройка будет применена к новому тексту.
В палитре «Абзац» задайте значения в полях «Отбивка перед абзацем» ( или ) и «Отбивка после абзаца» ( или ).
Примечание.
В первом абзаце колонки дополнительная отбивка перед абзацем не добавляется. В этом случае можно увеличить интерлиньяж первой строки абзаца или изменить отступ для текстового объекта.

Висячая пунктуация

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

Абзац без висячей пунктуации (слева) и абзац с висячей пунктуацией (справа)

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

Висячая пунктуация

Управляет выравниванием символов пунктуации для выделенного абзаца. Если «Висячая пунктуация» включена, следующие символы на 100 % находятся за полями: одинарные кавычки, двойные кавычки, дефисы, точки и запятые; следующие символы на 50 % находятся за полями: звездочки, тильды, многоточия, короткие и длинные тире, двоеточия, точки с запятой. Чтобы применить этот параметр, установите курсор в абзаце и выберите команду «Висячая пунктуация» в меню палитры «Абзац».

Визуальное выравнивание полей

Управляет выравниванием символов пунктуации для всех абзацев в текстовом объекте. Если «Визуальное выравнивание полей» включено, латинские символы пунктуации, а также края букв (например, W и А) выступают за поля текста, чтобы текст выглядел ровно. Для применения этого параметра выделите текстовый объект и выберите команду «Текст» > «Визуальное выравнивание полей».

Бурасагари

Управляет выравниванием двухбайтных символов пунктуации (в китайских, японских и корейских шрифтах). На эти символы пунктуации не влияют параметры «Висячая пунктуация» и «Визуальное выравнивание полей».

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

Примечание. Если за символом пунктуации следуют кавычки, оба символа будут висячими.

Связанные материалы

Клавиши для работы с текстом
Изменение поля вокруг текстовой области
Установка интерлиньяжа
Указание параметра «бурасагари»

Вход в учетную запись

Войти

Управление учетной записью

html — Отступ только первой строки текста в абзаце?

спросил 11 лет, 11 месяцев назад

Изменено 4 года, 11 месяцев назад

Просмотрено 106 тысяч раз

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

Как настроить таргетинг только на первые строки с помощью CSS или HTML?

html
css
отступ
цель
текст-отступ

Используйте свойство text-indent .

 р {
   отступ текста: 30px;
}

jsFiddle.

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

 р: первая строка {
    красный цвет;
}
п {
    отступ текста: 40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

Очень просто с использованием css:

 p {
    отступ текста: 10px;
}

Создает отступ в 10 пикселей в каждом абзаце.

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

Этот текст имеет отступ.

Источник: https://www.computerhope.com/issues/ch001034.htm

У меня также возникла проблема с отступом первой строки абзаца (только первой строки), и я пробовал следующий код:

 p::first-line { text-indent: 30px; }

Это не сработало. Итак, я создал класс в своем CSS и использовал его в своем html следующим образом:

в CSS:

 .indent { text-indent: 30px; }

в html:

текст абзаца

Это сработало как по маслу. Я до сих пор не знаю, почему первый пример кода не работал, и я убедился, что текст не выровнен.

Вот:

 p:first-line {
    отступ текста: 30px;
}

Не нашел четкого ответа для новичка в CSS, поэтому вот простой.

первый отступ всех строк (1), затем отступ первой строки (2)

 padding-left: 0.4em /* (1) */
отступ текста: -0.4em /* (2) */

Я столкнулся с той же проблемой, только у меня было несколько тегов

, с которыми мне приходилось работать. Используя свойство «text-indent», я хотел сделать отступ для ВСЕХ тегов

, а это не то, что я хотел.

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

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

Вот пример со встроенным CSS. Вы можете легко создать класс и добавить его в свой файл CSS:

Первый абзац

Второй абзац

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Отступ, начинающийся со второй строки абзаца с помощью CSS

спросил 9 лет, 9 месяцев назад

Изменено 6 месяцев назад

Просмотрено 193к раз

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

Пробовал

 p {
    отступ текста: 200px;
}
р: первая строка {
    отступ текста: 0;
}

 р {
    поле слева: 200px;
}
р: первая строка {
    поле слева: 0;
}

 (с позицией: родственник;)
п {
    слева: 200 пикселей;
}
р: первая строка {
    слева: 0;
}

html
css
текст
псевдокласс
отступ

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

Если это последнее, то что-то вроде этого JSFiddle было бы уместно.

 раздел {
        отступ слева: 1.5em;
        отступ текста:-1.5em;
    }
    
    охватывать {
        отступ слева: 1.5em;
        отступ текста:-1.5em;
    }

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquamererat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

В этом примере показано, как использование одного и того же синтаксиса CSS в DIV или SPAN дает разные эффекты.

У меня сработало:

 p { margin-left: -2em;
 отступ текста: 2em
 }

Сделать левое поле: 2em или около того сдвинет весь текст, включая первую строку, вправо на 2em. Затем добавьте text-indent (применимо к первой строке) как -2em или около того. Это возвращает первую строку к началу без поля. Я попробовал это для тегов списка

 <стиль>
    уль ли {
      поле слева: 2em;
      отступ текста: -2em;
    }

Существует рабочий проект CSS3, который (надеюсь, скоро) позволит вам написать только:

 p { text-indent: 200px hang; }

Следите за: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Мне нужно было сделать отступ на две строки, чтобы первое слово в абзаце было больше. Громоздкое одноразовое решение — поместить текст в элемент SVG и расположить его так же, как . Использование float и тега высоты SVG определяет, сколько строк будет иметь отступ, например.

<р> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Высота и ширина SVG определяют заблокированную область.
Y=36 — это глубина базовой линии текста SVG, равная размеру шрифта 9.0016
margin-top обеспечивает лучшее выравнивание текста SVG и абзаца
Здесь используются первые два слова, чтобы напомнить об уходе за спусковыми элементами

Да, это громоздко, но это также не зависит от ширины содержащего div.

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

Если вы стилизуете как список

, вы можете «выровнять текст: начальный», и все последующие строки будут иметь отступ.

Измените расстояние между строками и абзацами текста.

Расстояние между строками и абзацами текста.

Изменить высоту между строк в шаблоне

Как установить расстояние между отдельными абзацами

Как установить расстояние для всех абзацев сообщения

Ознакомьтесь также

Форматирование абзацев в Illustrator

Обзор палитры «Абзац»

Выравнивание текста

Выключка текста

Настройка межсловного и межбуквенного интервала в выровненном тексте

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

Установка отступов в палитре «Абзац»

Установка отступа с помощью палитры «Табуляция»

Создание висячего отступа

Настройка интервалов между абзацами

Висячая пунктуация

Связанные материалы

html — Отступ только первой строки текста в абзаце?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Отступ, начинающийся со второй строки абзаца с помощью CSS

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

Рубрики