Как сделать отступы в css

CSS: Отступ текста

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

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

Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.

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

Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.

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

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

Название документа p

У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).

Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.

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

Название документа .test1 < text-indent: 25px; >.test2

Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.

Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.

Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:

    Название документа .test1  Первая строка текста элемента div будет иметь отступ равный 15% ширины его родительского элемента или ширины окна браузера. Первая строка текста элемента p будет иметь отступ, который был унаследован от его родительского элемента.

Форматирование

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

Название документа p.class1 < text-transform: uppercase; text-decoration: overline; >p.class2 < text-transform: lowercase; text-decoration: line-through; >p.class3

Первый абзац.

Второй абзац.

Третий абзац.

Расстояние между символами в тексте изменено с помощью свойства letter-spacing.

С этой темой смотрят:

Выравнивание текста в CSS
Цвет и тень текста в CSS
Как изменить шрифт в CSS
CSS стиль и размер шрифта
Стандартные (безопасные) шрифты

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Внешние и внутренние отступы в CSS

В CSS есть два вида отступов — внешние и внутренние. Внутренние отступы — это расстояние от края контента до рамки блока. А внешние отступы — это расстояние от рамки блока до соседнего блока или до края страницы. Если рамки нет, то расстояние определяется от предполагаемой рамки. Для создания внешних отступов в CSS используется свойство margin , а для создания внутренних — свойство padding . В значениях этих свойств указывается расстояние в единицах, доступных в CSS.

Создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Контент
 Соседний блок

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

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

Отступы можно установить с каждой стороны по-отдельности. Для установки внешних отступов используются свойства margin-left , margin-right , margin-top , margin-bottom , а для внутренних отступов padding-left , padding-right , padding-top , padding-bottom .

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

Контент

Попробуйте установить блоку различные внутренние и внешние отступы, посмотрите, как они работают.

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

сначала отступ сверху
затем справа
затем снизу
затем слева

Если какой-то отсуп не нужен, то ему можно указать нулевое значение.

Контент

Коприрование материалов сайта возможно только с согласия администрации

CSS: Внешние отступы

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

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

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

margin-top — внешний отступ сверху
margin-right — внешний отступ справа
margin-bottom — внешний отступ снизу
margin-left — внешний отступ слева

Для объединения значений используют свойство margin , в котором сохраняется порядок указания:

отступ сверху
отступ справа
отступ снизу
отступ слева

Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:

Если указать только одно значение, то оно будет использовано одновременно для всех сторон
Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу

.card

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

Читать:

Как задать ширину страницы css

Задание

Добавьте в редактор с классом margin и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге . Используйте сокращённую запись

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Отступы и поля

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. CSS предоставляет полный контроль над этими параметрами.

CSS отступы

Отступы — это промежуток снаружи элемента за пределами любых установленных рамок.

У этого элемента есть отступ в 70px.

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

margin-top
margin-right
margin-bottom
margin-left

Все свойства отступов могут принимать следующие значения:

auto — значение отступа вычисляет браузер
ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
% — значение в процентах от ширины содержащего элемента
inherit — указывает на то, что значение должно наследоваться от родительского элемента

Также, можно использовать отрицательные значения.

В следующем примере установим отступы для всех четырех сторон элемента

margin — Краткая форма записи

Чтобы уменьшить код, все свойства определения отступов можно объединить в одно свойство.

CSS свойство margin является короткой формой записи следующих свойств определения отступов:

margin-top
margin-right
margin-bottom
margin-left

Это работает так:

Если у свойства margin определено четыре значения:

margin: 25px 50px 75px 100px;

верхний отступ 25px
правый отступ 50px
нижний отступ 75px
левый отступ 100px

Если у свойства margin определено три значения:

margin: 25px 50px 75px;

верхний отступ 25px
правый и левый отступы 50px
нижний отступ 75px

Если у свойства margin определено два значения:

margin: 25px 50px;

верхний и нижний отступы 25px
правый и левый отступы 50px

Если у свойства margin определено одно значение:

margin: 25px;

все четыре отступа 25px

Значение auto

Чтобы горизонтально центрировать элемент внутри его контейнера, можно для свойства margin задать значение auto .

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

Значение inherit

В следующем примере значение левого отступа элемента

наследуется от родительского элемента ():

 div < border: 1px solid red; margin-left: 100px; >p.ex1

Схлопывание отступов

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

Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!

Посмотрите на следующий пример:

 h1 < margin: 0 0 50px 0; >h2

Здесь у элемента нижний отступ установлен в 50px, а у элемента верхний отступ установлен в 20px.

Логика подсказывает, что вертикальный отступ между элементами и должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.

CSS поля

Поля — это промежуток вокруг содержимого элемента внутри любых установленных рамок.

У этого элемента есть поля в 70px.

В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:

padding-top
padding-right
padding-bottom
padding-left

Все свойства полей могут принимать следующие значения:

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

Внимание! Отрицательные значения не допустимы.

В следующем примере установим поля для всех четырех сторон элемента :

padding — Краткая форма записи

Чтобы уменьшить код, все свойства определения полей можно объединить в одно свойство.

CSS свойство padding является короткой формой записи следующих свойств определения полей:

padding-top
padding-right
padding-bottom
padding-left

Это работает так:

Если у свойства padding определено четыре значения:

padding: 25px 50px 75px 100px;

верхнее поле 25px
правое поле 50px
нижнее поле 75px
левое поле 100px

Если у свойства padding определено три значения:

padding: 25px 50px 75px;

верхнее поле 25px
правое и левое поля 50px
нижнее поле 75px

Если у свойства padding определено два значения:

padding: 25px 50px;

верхнее и нижнее поля 25px
правое и левое поля 50px

Если у свойства padding определено одно значение:

padding: 25px;

все четыре поля 25px

Ширина полей и элемента

CSS свойство width определяет ширину области с содержимым элемента. Область с содержимым — это пространство внутри полей, рамок и отступов элемента (блочная модель).

Таким образом, если у элемента задана ширина, то поля будут добавляться к общей ширине элемента. Это часто приводит к нежелательным результатам.

В следующем примере для элемента устанавливается ширина в 300px. Однако реальная ширина элемента будет 350px (300px + 25px левого поля + 25px правого поля):

Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing . Это будет определять реальную ширину элемента — если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.

В своем файле таблиц стилей измените код CSS для тега следующим образом:

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

Все CSS свойства определения отступов и полей

Свойство	Описание
margin	Короткое свойство, определяющее размер всех отступов элемента за одну декларацию
margin-bottom	Определяет размер нижнего отступа элемента
margin-left	Определяет размер левого отступа элемента
margin-right	Определяет размер правого отступа элемента
margin-top	Определяет размер верхнего отступа элемента
padding	Короткое свойство, определяющее размер всех полей элемента за одну декларацию
padding-bottom	Определяет размер нижнего поля элемента
padding-left	Определяет размер левого поля элемента
padding-right	Определяет размер правого поля элемента
padding-top	Определяет размер верхнего поля элемента