Изучаем поля и отступы в CSS на примере четырех HTML-элементов
HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .
Отступы в CSS — cинтаксис CSS-свойств padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin :
Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
- 10px — отступ сверху CSS;
- 20px — отступ справа CSS;
- 30px — отступ снизу CSS;
- 40px — отступ слева CSS .
Также можно установить отступ слева CSS и другие направления отдельно:
Примечание: Можно использовать для определения отступа px , pts , cm и т.д.
Синтаксис CSS-свойства padding
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
Для каждого направления одиночным объявлением:
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .
Для каждого направления в отдельности:
Пример для установки полей и отступов в HTML-списке
Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.
Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:
Посмотреть демо-версию и код
Добавив поля 10px для ссылок внутри <ul>:
мы получим следующий вид:
Посмотреть онлайн демо-версию и код
Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:
Посмотреть онлайн демо-версию и код
Весь класс для ссылок внутри элемента <ul> будет следующим:
Демонстрация полей на примере HTML-таблицы
Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.
Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :
Посмотреть демо-версию и код
Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:
Посмотреть демо-версию и код
Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:
Пример использования полей и отступов с элементом form
Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.
Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.
Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :
Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:
Поля для текстовых полей:
Поля для кнопки:
Посмотреть демо-версию и код
Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.
Поля формы будут выглядеть следующим образом:
Посмотреть демо-версию и код
После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.
Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.
Для кнопки “ Save ” мы также применили свойство padding :
которое используется для выравнивания текста во всех направлениях.
Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!
CSS: Отступ текста
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
Отступ текста
Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
CSS урок 10. Отступ и граница элемента CSS
Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.
Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:
Внешние отступы
Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента. 
Свойство:
- margin-bottom (нижний отступ)
- margin-left (отступ слева)
- margin-right (отступ справа)
- margin-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;
Пример:
</style></head> <body> <div> Агния Барто — стихи <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Внутренние отступы
Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Свойства:
- padding-bottom (нижний отступ)
- padding-left (отступ слева)
- padding-right (отступ справа)
- padding-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;
Пример:
</style></head> <body> <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Граница элемента (рамка)
Граница элемента в CSS устанавливается при помощи свойства border .
border-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Пример:
border-width (ширина границы)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
Пример:
</style></head> <body> <p на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> <p надо парту открывать,<br/> Не знала я сначала,<br/> И я не знала, как вставать,<br/> Чтоб парта не стучала.<br/> </p>
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.
border-color (цвет границы)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатиричной системе)
- transparent (прозрачная)
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Краткая запись:
border:border-width border-style border-color; border: 1px solid #000;
Внешние границы (outline)
Внешние границы в CSS создаются при помощи свойства outline , одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border , свойство outline не влияет на положение блока и его ширину.
outline-color (цвет)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатеричной системе)
- invert (инвертированный, противоположный)
outline-width (ширина)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
outline-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Краткая запись:
outline:outline-color outline-style outline-width; outline: #0f0 solid thick;
Некоторые приемы с границей
Рамка вокруг изображения
Пример:
Результат:
Двойная рамка с использованием CSS
Пример:
Результат:
Путь осилит идущий,
И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.
Отступы и поля
Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. CSS предоставляет полный контроль над этими параметрами.
CSS отступы
Отступы — это промежуток снаружи элемента за пределами любых установленных рамок.
В CSS есть свойства, позволяющие определять отступ для каждой стороны элемента:
- margin-top
- margin-right
- margin-bottom
- margin-left
Все свойства отступов могут принимать следующие значения:
- auto — значение отступа вычисляет браузер
- ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
- % — значение в процентах от ширины содержащего элемента
- inherit — указывает на то, что значение должно наследоваться от родительского элемента
Также, можно использовать отрицательные значения.
В следующем примере установим отступы для всех четырех сторон элемента <p>:
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
В следующем примере значение левого отступа элемента <p > наследуется от родительского элемента (<div>):
Схлопывание отступов
Верхний и нижний отступы элементов иногда схлопываются в один отступ, который будет равен самому большому из этих двух отступов.
Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!
Посмотрите на следующий пример:
Здесь у элемента <h1> нижний отступ установлен в 50px, а у элемента <h2> верхний отступ установлен в 20px.
Логика подсказывает, что вертикальный отступ между элементами <h1> и <h2> должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.
CSS поля
Поля — это промежуток вокруг содержимого элемента внутри любых установленных рамок.
В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:
- padding-top
- padding-right
- padding-bottom
- padding-left
Все свойства полей могут принимать следующие значения:
- ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
- % — значение в процентах от ширины содержащего элемента
- inherit — указывает на то, что значение должно наследоваться от родительского элемента
Внимание! Отрицательные значения не допустимы.
В следующем примере установим поля для всех четырех сторон элемента <div>:
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 определяет ширину области с содержимым элемента. Область с содержимым — это пространство внутри полей, рамок и отступов элемента (блочная модель).
Таким образом, если у элемента задана ширина, то поля будут добавляться к общей ширине элемента. Это часто приводит к нежелательным результатам.
В следующем примере для элемента <div> устанавливается ширина в 300px. Однако реальная ширина элемента <div> будет 350px (300px + 25px левого поля + 25px правого поля):
Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing . Это будет определять реальную ширину элемента — если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.
В своем файле таблиц стилей измените код CSS для тега <h2> следующим образом:
Вы увидите, что заголовки второго уровня отодвинутся от соседних элементов. В данном примере используется краткая форма записи свойств отступов и полей.