Css поля у страницы

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

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. 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	Определяет размер верхнего поля элемента

          Источник

          Изучаем поля и отступы в 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 v34