Как выровнять по центру css margin
Перейти к содержимому

Как выровнять по центру css margin

  • автор:

margin

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

Интерактивный пример

Составные свойства

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

Синтаксис

/* Применяется ко всем четырём сторонам */ margin: 1em; margin: -3px; /* по вертикали | по горизонтали */ margin: 5% auto; /* сверху | горизонтально | снизу */ margin: 1em auto 2em; /* сверху | справа | снизу | слева */ margin: 2px 1em 0 auto; /* Глобальные значения */ margin: inherit; margin: initial; margin: unset;

Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип , или является ключевым словом auto . Каждое значение может быть положительным, отрицательным или равным нулю.

  • Когда определено одно значение, такое значение определено для всех четырёх сторон.
  • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
  • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
  • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).

Значения

Размер отступа как фиксированное значение.

Размер отступа в процентах относительно ширины родительского блока.

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

Формальное определение

  • margin-bottom : 0
  • margin-left : 0
  • margin-right : 0
  • margin-top : 0
  • margin-bottom : процент, как указан, или абсолютная длина
  • margin-left : процент, как указан, или абсолютная длина
  • margin-right : процент, как указан, или абсолютная длина
  • margin-top : процент, как указан, или абсолютная длина

margin

Свойство, которым можно отодвинуть элемент от соседей. Или придвинуть.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Примеры
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Дока Дог советует
    2. Егор Левченко советует
    3. Алёна Батицкая советует

    Контрибьюторы:

    • Алёна Батицкая ,
    • Егор Левченко

    Обновлено 6 октября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Задаёт размер внешнего отступа вокруг элемента. Иногда внешние отступы называют полями.

    Чтобы сделать отступ только с одной стороны, используй margin — top (сверху), margin — right (справа), margin — bottom (снизу) или margin — left (слева).

    Или более современные margin — inline — start , margin — inline — end , margin — block — start и margin — block — end .

    Примеры

    Скопировать ссылку «Примеры» Скопировано

    Применяется ко всем четырём сторонам:

     .selector  margin: 1em; margin: -3px;> .selector  margin: 1em; margin: -3px; >

    Сверху и снизу | слева и справа:

     .selector  margin: 5% auto;> .selector  margin: 5% auto; >

    Сверху | слева и справа | снизу:

     .selector  margin: 1em auto 2em;> .selector  margin: 1em auto 2em; >

    Сверху | справа | снизу | слева:

     .selector  margin: 2px 1em 0 auto;> .selector  margin: 2px 1em 0 auto; >

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Значение margin может выражаться в пикселях (px), процентах (%) или словом auto , а также в любых других доступных в вебе единицах измерения.

    Отрицательное значение margin тоже возможно: вместо отступа, оно, наоборот, ставит элемент ближе к соседнему.

    Можно задать margin с помощью одного, двух, трёх или четырёх значений. В зависимости от этого, отступ появится для всех или только для указанных сторон:

    • Если указать одно значение (например, margin : 1px; ), отступ в 1 пиксель появится со всех сторон;
    • Если указать два ( margin : 5 % auto; ), первое значение применится для верхнего и нижнего отступа, а второе для левого и правого;
    • При трёх значениях ( margin : 1em auto 2em; ) первое делает отступ сверху, второе — слева и справа, третье — снизу;
    • Если указать четыре значения ( margin : 2px 1em 0 auto; ), они применятся по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Размер отступа margin можно задать в такими значениями:

    Число с единицами измерения — фиксированный отступ в пикселях px или других единицах.

    Проценты — отступ в процентах % от ширины блока.

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

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Свойство margin создаёт пространство вокруг элемента, в то время, как padding добавляет пространство внутри элемента.

    �� margin задаёт расстояние от края элемента до родительского элемента, а если такого нет, то до края окна браузера. По умолчанию браузерное окно имеет свои отступы внутри; чтобы от них избавиться, добавь в значение margin : 0 .

    На практике

    Скопировать ссылку «На практике» Скопировано

    Дока Дог советует

    Скопировать ссылку «Дока Дог советует» Скопировано

    �� margin тот ещё непредсказуемый чёрт. Слева и справа работает адекватно, даже в строчных элементах. Но стоит сделать margin — top — так будь готов к сюрпризам. К примеру, все строчные элементы, то есть display : inline , вообще не учтут твой отступ сверху и снизу. Блочные тоже могут сработать, а могут и нет: в зависимости от родителя. Единственное, где в margin — top и margin — bottom можно быть уверенным — это в элементах с position : absolute и position : fixed — уж там margin точно не сможет тебя обмануть.

    Егор Левченко советует

    Скопировать ссылку «Егор Левченко советует» Скопировано

    �� Чтобы упростить работу лучше всего использовать и padding (для внутренних отступов внутри блока) и margin для внешних отступов элемента внутри блока. Например, если у вас указаны корректные padding -отступы, то вам не придётся использовать margin — top для отступа от верхнего края для первого элемента.

    После того, как вы задали внутренние отступы, всегда используйте один и тот же margin для вертикальных отступов. Отступ сверху из-за установленных внутренних padding -отступов у блока вам больше не нужен, поэтому пользуйтесь margin — bottom для отступов между элементами. Вы же пишете сверху вниз, правда? Тогда вам всегда будет понятно, почему тот или иной элемент находятся не там, где вам хочется.

    Конечно, никто не запрещает использовать и популярное: margin : 0 auto; для центрирования элемента по строке.

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    �� Очень частый приём, который используется в вёрстке — выравнивание блочного элемента по центру родителя при помощи margin : 0 auto .

    Предположим, есть основная колонка контента, которая должна находится по центру окна браузера. Для этого потребуется ограничить ширину колонки. Например, задать width : 80 % . Зачем? Потому что все блочные элементы по умолчанию имеют ширину 100%. Если не будет свободного места, то отцентрировать элемент не получится.

    Теперь, когда у элемента появилось свободное место, можно применить к нему свойство margin : 0 auto . За счёт ключевого слова auto по бокам элемента будут равные внешние отступы, выравнивающие элемент по центру. В данном случае слева и справа отступ будет равен (100% — 80%) / 2 = 10%. Получается, размер, оставшийся после вычитания ширины элемента из 100%, делится на 2.

    Причём боковые отступы будут гибкими. Если задать ширину элемента в пикселях, а затем выровнять при помощи margin — боковые отступы будут тянуться в зависимости от ширины окна браузера.

    �� Начинающие разработчики часто злоупотребляют отрицательными отступами. Это очень плохая практика.

    Представь, что ты делаешь перестановку в доме и решаешь поставить обеденный стол на 20 сантиметров над полом и на пол метра в стену. На сколько это будет логично и удобно?

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

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

    Свойство margin

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

    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).

    Пример 2. Значение auto

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

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

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

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

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

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

    Пример 3. Значение auto

    HTML5

    margin

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

    Выравнивание картинки по центру

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

    Проценты

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

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

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

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

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

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

    .

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

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

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

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

    Обнуление margin

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

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

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

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

      margin

      Кря-кря

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

      Обнуление margin у <body></p> <p>» /></p> <p>Рис. 6. Обнуление margin у</p> <p>Автор: Влад Мержевич<br /> Последнее изменение: 05.08.2023</p> <p>Сделайте таблицу, как показано на рис. 1. Ширина таблицы составляет 80% и она выровнена по центру. Обратите внимание, что содержимое третьей колонки выровнено по центру.</p> <p><img decoding=

      Камни

      Название Цвет Твердость по Моосу Формула
      Алмаз Белый 10 C
      Рубин Красный 9 Al2O3
      Аметист Голубой 7 SiO2
      Изумруд Зеленый 8 Be3Al2(SiO3)6
      Сапфир Голубой 9 Al2O3

      Создайте веб-страницу, как показано на рис. 1.

      Погода

      ВТ

      Солнечно

      СР

      Облачно

      ЧТ

      Дождливо

      См. также

      • margin
      • margin в CSS
      • Абсолютное позиционирование
      • Блочные элементы
      • Выравнивание с помощью флексбоксов
      • Колесо для сокращённых свойств
      • Открываем блочную модель
      • Строчные элементы
      • Схлопывающиеся margin

      Рецепты

      • Как выровнять таблицу по центру?
      • Как сделать обтекание картинки текстом?

      margin auto не работает

      Почему блок «MAKESHOP.PRO И CS-CART» на странице makeshop.pro/24500 не выравнивает его посередине? У блока задана ширина, 1200px.

      Отслеживать
      13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
      задан 26 апр 2017 в 9:52
      63 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
      Напишите ваш код прямо сюда.
      26 апр 2017 в 9:57

      Переходите на Bootstrap 3 и 4, новые сайты на старом фреймворке делать не стоит. Что у вас не работает, так и непонятно, приведите пример неработающего кода прямо сюда.

      26 апр 2017 в 10:01

      у меня блок с заданной шириной не перемещается по-середине, хотя для него задан margin:auto Сейчас, для блока «MAKESHOP.PRO И CS-CART» задан margin-left: 10%;, что неправильно Могу конечно предоставить весь css и html, но там будет много лишнего. Проще наверное, смотреть на живом примере

      Похожие публикации:
      1. Где купить матрицу для телевизора sony
      2. Как вывести объект php
      3. Как объединить два файла в автокаде
      4. Сколько весит кузов краза

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

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