No Image

Тег margin в html

СОДЕРЖАНИЕ
0 просмотров
11 марта 2020

Поддержка браузерами

12.0+ 6.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют "внешний отступ" или "поле") от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:

Визуальный эффект будет зависеть от количества заданных значений:

  • margin:10px 5px 15px 20px;
  • Верхнее поле – 10px
  • Правое поле – 5px
  • Нижнее поле – 15px
  • Левое поле – 20px
  • margin:10px 5px 15px;
    • Верхнее поле – 10px
    • Правое и левое поле – 5px
    • Нижнее поле – 15px
    • margin:10px 5px;
      • Верхнее и нижнее поле – 10px
      • Правое и левое поле – 5px
      • Внешний отступ по горизонтали может быть установлен и для блочных и для строчных элементов, а по вертикали только для блочных элементов.

        Объединение вертикальных полей

        1. Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) – 20px, единое поле в этом случае будет высотой 20px.
        2. Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.
        Читайте также:  1С дата запрета загрузки

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

        Примечание: допускаются отрицательные значения полей.

        Свойство margin задаёт внешние отступы блока — отступы от внешней границы элемента до границ родительского элемента или до соседних элементов.

        Внешние отступы для разных сторон задаются с помощью свойств margin-top , margin-right , margin-bottom и margin-left :

        Сокращённое свойство margin работает аналогично свойству padding , только задаёт внешние отступы, а не внутренние:

        Одинаковые отступы со всех сторон.

        Сверху и снизу 5px , справа и слева 10px .

        Сверху 5px , слева и справа 10px , снизу 15px .

        Верхний, правый, нижний, левый отступы соответственно.

        Строчные боксы реагируют только на горизонтальные внешние отступы.

        Свойство CSS margin отвечает за задание внешних отступов элемента от других объектов.

        Синтаксис CSS margin

        • top – отступ сверху от других элементов;
        • right – отступ справа от других элементов;
        • bottom – отступ снизу от других элементов;
        • left – отступ слева от других элементов;

        Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

        Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

        • Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
        • Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
        • Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

        Примечание 2

        В отличии от свойства CSS padding, margin допускает отрицательные значения.

        Также у margin есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

        • margin-left – отступ от левой границы элемента;
        • margin-right – отступ от правой границы элемента;
        • margin-top – отступ от верхней границы элемента;
        • margin-bottom – отступ от левой границы элемента;
        Читайте также:  Salt and sanctuary coop land

        Свойство CSS margin используется практически постоянно. Отступы играют важнейшую роль в оформлении html страницы. Приведем примеры

        Комментировать
        0 просмотров
        Комментариев нет, будьте первым кто его оставит

        Это интересно
        No Image Компьютеры
        0 комментариев
        No Image Компьютеры
        0 комментариев
        No Image Компьютеры
        0 комментариев
        No Image Компьютеры
        0 комментариев
        Adblock detector