Поля и отступы CSS — пояснение на примере четырех HTML-элементов

Свойство HTML margin используется для добавления отступа или разрыва между разными элементами. Свойство padding используется для добавления пространства между содержимым и границей(рамкой) указанного HTML-элемента.

Разницу между полем ввода и отступом можно без труда увидеть на следующем рисунке:

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

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

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

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху;
  • 20px — отступ справа;
  • 30px — отступ снизу;
  • 40px — отступ слева.

Также можно установить margin left HTML и иные направления отдельно:

margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Синтаксис свойства CSS padding

Свойство padding можно задать при помощи единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

padding: 50px;

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;

Пример для установки полей ввода и отступов в HTML-списке

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В данной демо-версии я создал список при помощи пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он включает пункты меню в виде гиперссылок.

Список задается и иными свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть демо-версию и код

Добавив поля ввода 10px для ссылок внутри <ul>:

padding: 10px;

мы получим следующий вид:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;margin: 2px;text-decoration: none;color: #fff;background-color: #DA8119;display:block;

Демонстрация полей ввода на примере HTML-таблицы

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили при помощи разных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть демо-версию и код

Добавив поля ввода, мы получим таблицу, которая будет выглядеть следующим образом:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть демо-версию и программный код

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

padding: 20px;border: dashed 1px #DF7000;background: #D0E8AC;color: #000;

Пример использования полей ввода и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей ввода, кнопок и т.д.

Свойство padding, примененное к текстовому полю ввода, задает пространство между курсором внутри текстового поля ввода и его границей. margin добавляет отступы между разными текстовыми полями ввода или иными элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями ввода с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Добавив поля ввода к классу текстовых полей ввода и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля ввода для текстовых полей ввода:

padding: 10px;

Поля ввода для кнопки:

padding: 9px 15px;

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями ввода, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями ввода.

margin: -3px;

Поля ввода формы будут выглядеть следующим образом:

Поля ввода и отступы CSS - пояснение на примере четырех HTML-элементов Посмотреть демо-версию и программный код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями ввода уменьшилось на 3 пикселя.

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

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *