margin

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

• auto — the browser calculates the margin
• length — specifies a margin in px, pt, cm, etc.
• % — specifies a margin in % of the width of the containing element
• inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

  Example

  Use the margin shorthand property with four values:

  If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

    Example

    Use the margin shorthand property with three values:

    If the margin property has two values:

    • margin: 25px 50px;
      • top and bottom margins are 25px
      • right and left margins are 50px

      Example

      Use the margin shorthand property with two values:

      If the margin property has one value:

      Example

      Use the margin shorthand property with one value:

      The auto Value

      You can set the margin property to auto to horizontally center the element within its container.

      The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

      Example

      The inherit Value

      Example

      div <
      border: 1px solid red;
      margin-left: 100px;
      >

      All CSS Margin Properties

      Property	Description
      margin	A shorthand property for setting all the margin properties in one declaration
      margin-bottom	Sets the bottom margin of an element
      margin-left	Sets the left margin of an element
      margin-right	Sets the right margin of an element
      margin-top	Sets the top margin of an element

      Источник

      CSS margin:auto — Как это работает?

      Использование margin:auto , чтобы отцентрировать блочный элемент по горизонтали, это хорошо известный способ. Но задумывались ли вы, как это работает?

      Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

      «auto» — занять все доступное пространство

      Это наиболее распространенный способ использования auto для отступов. Если мы задаем auto для левого и правого отступов одного элемента, они равномерно займут все доступное в контейнере по горизонтали пространство. Таким образом элемент расположится по центру.

      Это работает только для горизонтальных отступов. Но не будет работать для плавающих и строчных элементов. А также для абсолютно и фиксировано позиционированных элементов.

      Имитация плавающего поведения через распределение доступного пространства

      auto поровну распределяет все свободное пространство между правым и левым отступами. Но что произойдет, если мы зададим это значение только для одного из отступов? Тогда он займет все доступное пространство, и элемент будет смещен к правому или левому краю.

      «auto» — задать 0 пикселей

      Как упоминалось выше, auto не работает для плавающих, строчных и абсолютно позиционированных элементов. Для них уже определена структура, так что в использовании margin auto нет смысла.

      Это будет только нарушать изначальную структуру. В том числе и для отступа текста сверху CSS . Следовательно, auto будет задавать значение 0 пикселей для отступов этих элементов.

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

      Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100% . Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

      Что происходит с вертикальными отступами со значением auto?

      auto и для отступа сверху CSS , и для нижнего отступа всегда вычисляется как 0 пикселей ( за исключением абсолютно позиционированных элементов ). В спецификации W3C указано следующее:

      «Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

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

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

      Или из-за эффекта объединения отступов ( слияния отступов соседних элементов ). Это еще одно исключение из данного правила определения вертикальных отступов.

      Центрирование абсолютно позиционированных элементов

      Так как для абсолютно позиционированных элементов введено исключение, можно использовать значение auto , чтобы выровнять их по центру вертикально и горизонтально. Но сначала нужно выяснить, когда margin:auto будет работать именно так для отступа сверху CSS .

      В другой спецификации W3C сказано:

      «Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right. »
      » Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

      Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left , width и right не должно задаваться значение auto ( их значение по умолчанию ). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

      В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

      «Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static. «

      «Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

      Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top , height и bottom не должны иметь значение auto .

      Теперь, объединив все это, мы получим следующее:

      Заключение

      Если вам требуется сместить элемент на странице вправо или влево без контейнерных элементов ( например, как в случае с float ), помните, что есть возможность использовать для отступов значение auto .

      Преобразование элемента в абсолютно позиционируемый только для того, чтобы отцентрировать его по вертикали ( отступы сверху CSS ), не лучшая идея. Существуют и другие варианты, такие как flexbox и CSS transform , которые больше подходят для этого.

      Вадим Дворников автор-переводчик статьи « CSS – margin auto – How it Works »

      Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

      Источник

      Свойство margin

      Свойство margin устанавливает пустое пространство от внешнего края border , padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

      

      margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom .

      Пример 1. Расстояние между блоков

      Результат данного примера показан на рис. 2.

      

      Рис. 2. Расстояние между блоков

      Значения margin

      В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto . В остальном margin похоже на padding , у него также может быть от одного до четырёх значений.

      Одно значение — определяет отступы для всех сторон блока.

      margin: все стороны; margin: 10px;

      Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

      margin: верх-низ лево-право; margin: 10px 20px;

      Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

      margin: верх лево-право низ; margin: 10px 20px 5px;

      Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

      margin: верх право низ лево; margin: 5px 10px 15px 20px;

      Значение auto

      Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

      Результат данного примера показан на рис. 3.

      

      Рис. 3. Выравнивание блока по центру

      Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto .

      Выравнивание блока по центру через значение auto работает только в сочетании с width .

      Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

      

      Результат данного примера показан на рис. 4.

      

      Рис. 4. Выравнивание картинки по центру

      Проценты

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

      • По горизонтали проценты считаются от ширины всего блока.
      • По вертикали проценты считаются от ширины всего блока.

      Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom .

      Отрицательный margin

      margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

      В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента

      .

      Пример 4. Использование отрицательного значения

      Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

      

      Рис. 5. Поднимаем блок вверх через margin-top

      Обнуление margin

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

      • для по умолчанию margin задан как 8px;
      • для списков
        ,
        , margin-top и margin-bottom заданы как 1em;
        • для и margin-left и margin-right заданы как 40px.

        Эти margin , согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента , после чего элемент плотно прилегает к краям браузера.

        Пример 5. Обнуление margin

        Кря-кря

        Результат данного примера показан на рис. 6.

        

        ВТ

        

        Солнечно

        СР

        

        Облачно

        ЧТ

        

        Дождливо

        См. также

        Рецепты

        Источник
      Читайте также:  Html css div style border