Как сделать отступ между абзацами в css

Обновлено: 10.10.2024

Большую часть времени веб-разработчики тратят на то, где будет располагаться текст и, как он будет выглядеть. Существует множество свойств, которые позволяют работать с текстом. Иногда текст и шрифты используют как синонимы. Разделим эти два понятия. Текст – это содержимое, а шрифт – это то, что отображает содержимое.

Одним из самых распространенных эффектов является отступ первой строки абзаца (в просторечие: красная строка). Он позволяет создать видимость структурированности текста.

Свойство text-indent реализует отступы в CSS. Рассмотрим его синтаксис:

Результатом применения свойства является смещение первой строки любого блочного элемента на заданную длину или процентное соотношение. Допускаются отрицательные значения. Не допускается применение свойства к строковым элементам. Далее пример применения свойства text-indent .

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

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding. Такой отступ принадлежит самому элементу и находится внутри него.

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin. Такой отступ находится вне элемента.

Для наглядности картинка:

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в файле каскадных таблиц стилей будет выглядеть следующим образом:

p.test padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
>

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

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

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

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

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

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера. Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

В качестве значений внешних отступов допустимо применять отрицательные величины:

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента web-страницы:

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

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

border-width — толщина рамки;
border-color — цвет рамки;
border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

Следующий параметр border-color с помощью которого можно управлять цветом рамки:

border-color: [цвет | transparent] | inherit

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

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

И последний параметр border-style задает тип рамки:

Тип рамки можно указывать сразу для всех сторон элемента или только для указанных. В качестве значений можно использовать несколько ключевых слов. Вид будет зависеть от используемого браузера и толщины рамки. Значение none используется по умолчанию и не отображает рамку и ее толщина задается нулевой. Значение hidden имеет тот же эффект. Получаемая рамка для остальных значений в зависимости от толщины приведена в таблице ниже:

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

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

Вы уже должны знать, что в HTML абзац создаётся с помощью тега . Таким образом, каждый абзац должен быть в своём теге . А для создания отступов первой строки каждого абзаца достаточно подключить такой CSS-код:

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

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

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

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

Свойство text-align позволяет выравнивать текст по горизонтали в пределах элемента.

По умолчанию текст размещается в левой части элемента - значение left . Он также может располагаться в правой части, выравниваться по центру или по ширине элемента, если свойство text-align принимает соответственно значения right , center и justify .

Свойство применимо ко всем элементам.

: left ; "> Текст расположен слева.

: center ; "> Выравнивание по центру.

: right ; "> Текст расположен в правой части абзаца.

Текст расположен слева.

Выравнивание по центру.

Текст расположен в правой части абзаца.

Оформление и выделение текста

Свойство text-decoration позволяет определенным образом выделить текст:

подчеркнуть текст - значение underline , перечеркнуть текст - значение line-through ,

провести линию над текстом - значение overline и установить мигающий текст - значение blink .

Присвоение свойству text-decoration значения none отменяет все оформление, включая подчеркивание ссылок, устанавливаемое браузером по умолчанию.

Свойство применимо ко всем элементам.

Отступ первой строки

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

Величина отступа измеряется в единицах принятых в CSS (подробнее здесь. ) или задается в % .

Свойство применимо к блочным элементам (подробнее здесь. ).

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

: 25px ; "> Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!

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

Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!

Регистр букв

Свойство text-transform задает регистр букв для текста элемента.

Все буквы текста в элементе будут заглавными, если свойству text-transform присвоено значение uppercase , строчными при значении lowercase или каждое слово в тексте будет начинаться с заглавной буквы при значении capitalize .

При значении none (значение по умолчанию) текст не меняет регистра.

Свойство применимо ко всем элементам.

: uppercase ; "> Все буквы текста в верхнем регистре.

: capitalize ; "> Лишь первая буква каждого слова в верхнем регистре.

Все буквы текста в верхнем регистре.

Лишь первая буква каждого слова в верхнем регистре.

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

Свойства letter-spacing и word-spacing задают соответственно интервал между буквами и интервал между словами в тексте элемента.

Интервал задается в единицах длины, принятых в CSS (подробнее здесь. ).

По умолчанию эти расстояния зависят от используемого шрифта.

Свойства применимы ко всем элементам.

: 5px ; "> Интервал между буквами равен 5 пикселям.

: 10px ; "> Расстояние между словами составляет 10 пикселей.

Интервал между буквами равен 5 пикселям.

Расстояние между словами составляет 10 пикселей.

Межстрочный интервал

Межстрочный интервал устанавливается с помощью свойства line-height .

Интервал задается в единицах длины, принятых в CSS (подробнее здесь. ); в % относительно высоты текущего шрифта, которая принимается за 100% ; или указывается любое положительное число - множитель. В этом случае интервал будет равен произведению множителя на размер текущего шрифта.

При значении normal (значение по умолчанию) межстрочный интервал зависит от шрифта и определяется браузером.

: 2 ; "> Установим межстрочный интервал, выбрав в качестве значения число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.

Установим межстрочный интервал, выбрав в качестве значения свойства число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.

Пробелы и переносы

По умолчанию несколько пробелов в исходном коде браузеры отображают как один, а перенос текста на следующую строку происходит автоматически.

Свойство white-space позволяет учесть все пробелы, установленные в исходном коде, а также контролирует перенос текстовой строки.

При значении pre свойства white-space браузер учтет все пробелы и переносы в исходном коде. Но автоматический перенос строк не работает.

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

И значение по умолчанию normal , как уже упоминалось, не учитывает несколько пробелов, и при этом имеет место автоматический перенос сток.

Свойство применимо к блочным элементам (подробнее здесь. ).

Добавление тени

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

Добавление к тексту тени происходит при помощи свойства text-shadow .

Обязательными параметрами тени являются сдвиги по оси X и по оси Y , которые задаются в единицах измерения, принятых в CSS (подробнее здесь. ). Далее можно указать радиус размытия тени (также в единицах измерения, принятых в CSS), и, при необходимости, цвет тени, который можно задать двумя способами (подробнее здесь. ).

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

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

Но в использовании тени есть и недостаток, заключающийся в том, что браузер Internet Explorer понимает добавление тени только с 10.0 версии.

Читайте также: