Сделать поля в css

Поля в CSS

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

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

У нас есть следующие свойства для установки поля элемента.

• margin специфицирует сокращённое свойство для установки свойств полей в одной декларации.
• margin-bottom определяет нижнюю границу элемента.
• margin-top определяет верхний край элемента.
• margin-left задано левое поле элемента.
• margin-right определяет правую границу элемента.

Теперь посмотрим, как использовать эти свойства с примерами.

Свойство Margin

Свойство margin позволяет вам установить все свойства для четырех полей в одном объявлении. Вот синтаксис для установки поля вокруг абзаца —

 < html> < head> < /head> < body> < p style="margin: 15px; border:1px solid black;">all four margins will be 15px < /p> < p style="margin:10px 2%; border:1px solid black;">top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. < /p> < p style="margin: 10px 2% -10px; border:1px solid black;">top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px < /p> < p style="margin: 10px 2% -10px auto; border:1px solid black;">top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser < /p> < /body> < /html>

Это приведет к следующему результату —

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Источник

Изучаем поля и отступы в 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. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

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

Также можно установить отступ слева CSS и другие направления отдельно:

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

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

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

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

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

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

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 он будет выглядеть так:

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

Посмотреть онлайн демо-версию и код

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

Посмотреть онлайн демо-версию и код

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

CSS отступы

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

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

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

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

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

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

:

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

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

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

Если у свойства 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 определено одно значение:

      Значение auto

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

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

      Значение inherit

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

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

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

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

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

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

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

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

      CSS поля

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          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	Определяет размер верхнего поля элемента

          Источник