margin-top в CSS


Содержание

Свойство CSS margin-top

Описание и использование

Свойство CSS margin-top задает величину верхнего отступа от элемента до окружающих его элементов.

Заметка: Разрешены отрицательные значения.

Значение по умолчанию
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.marginTop=»10px»

Поддержка в браузерах

Свойство margin-top поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

margin-top

Свойство CSS margin-top используется для указания размера верхнего внешнего поля элемента, которое находится за верхней границей его рамки (border-top). В отличие от верхнего внутреннего отступа (padding-top), цвет поля всегда прозрачный, поэтому сквозь него просвечивается фон окружающего контекста.

Расположение верхнего поля — margin-top

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

Тип свойства

Применяется: ко всем элементам, кроме тегов , , , , , , , и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row и table-cell.

Значения

Значением свойства margin-top является указание размера верхнего поля элемента одним из следующих способов:

  • Размер — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Допускаются отрицательные значения.
  • Проценты — расстояние в процентах (%), где за 100% берется ширина (именно ширина) элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (position: static или relative ) расчет полей идет относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширины тела документа ( ).
    2. Процентный размер полей самого тела документа считается относительно ширины корневого элемента ( ).
    3. Для элементов с position: fixed поля считаются относительно ширины окна браузера.
    4. Для элементов с position: absolute поля считаются относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно ширины окна браузера.

    Допускается указывать отрицательные процентные значения.

  • auto — размер поля рассчитывается браузером автоматически исходя из доступного пространства выше элемента.
  • inherit — наследует значение margin-top от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: в спецификации указан ноль (0), но на самом деле у некоторых HTML-элементов браузеры изначально устанавливают определенный размер полей. Например, у параграфов присутствуют ненулевые поля сверху и снизу.

Синтаксис

Пример CSS: использование margin-top

Результат. Использование свойства CSS margin-top.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit и в некоторых случаях неправильно считают верхнее поле абсолютно позиционируемых элементов, когда margin-top : auto .

Кроме этого IE 6.0 неправильно рассчитывает процентные значения margin-top .

Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу продолжить тему изучения CSS (каскадных таблиц стилей) и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для Html элементов: border, margin и padding.

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (Font Weight, Family, Size, Style), текстом (text-decoration, vertical-align, text-align) и рассмотрели модель формирования фона в CSS через background.

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

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

Блочная модель в CSS — padding, margin и border

Для браузера Firefox есть замечательный плагин под названием Фаербаг, о котором я уже довольно давно и подробно писал.

При просмотре информации о любом Html теге веб страницы, этот плагин на вкладке «Макет» позволяет увидеть очень наглядное представление отступов и границ данного элемента относительно родительского и тех тегов (или же содержимого), которые заключены внутри оного (матрешка такая получается):

На этой схеме четко видно, что для любого Html элемента в CSS можно четко задать размеры четырех прямоугольных областей. Внутри всей конструкции лежит, собственно, содержимое этого тега (например, текст или изображение), которое может в свою очередь включать в себя и другие вложенные элементы (например, таблица с ячейками и их содержимым).

Если начинать рассматривать эту матрешку изнутри, начиная с содержимого, то дальше идет область внутреннего отступа от этого содержимого до рамки этого тега. Размер области задается с помощью CSS правила Padding, а ширину рамки можно задать с помощью Border.

Следуя из центра к периферии, мы после рамки должны будем задать область внешнего отступа с помощью Margin. Оно позволяет регулировать взаимоотношения с границами других блоками. Например, с помощью задания отрицательных отступов в CSS правиле мерджин, можно добиваться наложения одних блоков веб страницы на другие соседние блоки этой же страницы.

Сразу оговорюсь, что вы можете задавать Padding и Margin, а также размеры рамки Border отдельно для каждой из сторон блока (прямоугольной области), которые определяются как:

  1. top (верх) — например, padding-top, margi-top, border-top
  2. bottom (низ)
  3. left (слева)
  4. right (справа)

Ну и для примера посмотрим, что именно будут обозначать border, margin и padding применительно к каким-то конкретным сторонам блочной модели:

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

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

Получилось слегка запутано, но так оно всегда бывает поначалу. Со временем у вас все в голове устаканится и блочная модель примет ясные и стройные очертания. Иначе и быть не может.

Margin (top, bottom, left, right) — внешние отступы в CSS

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

Наш элемент, для которого мы прописывает данное правило, взаимодействует с границами своего контейнера и с границами соседних блоков, которые в коде расположены рядом с ним. Соответственно, существуют четыре CSS правила для каждой из имеющихся границ: margin-top,right, bottom и left. Что можно использовать в качестве значений для них?

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

Во-вторых, в качестве значений для margin-top, right, bottom и left можно использовать размерные величины Em, Ex или Px.

В-третьих, могут использоваться проценты. От чего же они считаются? Оказывается, что от ширины контейнера (то есть от области контента родительского элемента). Причем, это относится не только к margin-right и left, что было бы логично, но и для margin-top и bottom проценты будут рассчитываться именно от ширины (а не высоты) контейнера.

Надо отметить, говоря про задание размерных значений, что Margin может быть еще и отрицательным. Т.е. при задании положительного значения для внешнего отступа мы отодвигаем соседний элемент на указанное расстояние, а в случае указания отрицательного — соседний блок просто-напросто заедет на тот, для которого мы этот отрицательный отступ задали. И это очень часто используется в CSS.

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

Т.е. перечисление начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга правым отступом (right). Выглядеть это может примерно так:

И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:

Сокращение CSS кода видно невооруженным глазом. Но и это еще не предел. Вполне допустимо использовать в сборном правиле не только четыре, но и три, два и даже всего одно значение. Что еще больше поможет уменьшить размер кода. Однако, уменьшать количество значений можно будет только в определенных случаях:

    Если величины внешних отступов слева и справа будет одинаковыми, например, так:

То последнее можно будет опустить:

Эти две записи сборного правила делают одно и то же. Поэтому, если вы видите запись с тремя величинами в Margin, то величину четвертого (справа) можно будет подсмотреть во втором (слева).

В случае равенства отступов сверху и снизу такой фокус уже не пройдет, ибо по логике можно уменьшать структуру записи сборного правила, лишь отсекая дублирующее значения с ее конца (а значение нижнего отступа будет стоять предпоследним).

Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу:

или, что то же самое (в силу пункта 1):

То такое сборное правило можно записать всего с двумя значениями, отбросив последнее, которое совпадает с первым:

В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.
Ну и, наконец, если все значения в сборном правиле будут одинаковыми:

или, что то же самое (в силу пункта 2):

То можно будет использовать максимально сокращенный тип записи (отбросив последнее значение совпадающее с первым):

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

Говоря про внешние отступы, стоит упомянуть про такую схему как «Margin-colloapse» или, по другому, «схлопывание марджинов». В двух словах суть этого явления заключается в следующем.

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

Например, если для верхнего блока задано следующее:

То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.

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

Например, в этом случае:

Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.

Еще одной особенностью использования правила Margin в CSS является то, что прописанное значение по вертикали для строчных элементов игнорируется. Задав:

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

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

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

Ну и рамка (Border), а точнее ее ширина, тоже не сможет отодвинуть по вертикали от строчного тега другие соседние блоки. Для строчных элементов движуха возможна только в одном направлении — по горизонтали и все.

Padding и border — внутренние отступы и рамки

Давайте теперь перейдем к заданию внутренних отступов с помощью правила Padding и посмотрим, какие именно значения оно может принимать:

Как вы можете видеть, тут нет упоминания Auto, а также это CSS правило не допускает использование отрицательных значений (они могут быть только положительными — от нуля и выше). Т.е. с помощью Padding контент за пределы рамки выдвинуть никак не получится. Максимум что можно сделать, это контент вплотную приблизить к рамке.

Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:

В этом правиле мы, начиная с верха, описываем все четыре стороны. Если в нем нужно будет чего-то сократить (до трех, двух или даже одного значения), то использовать нужно будет описанные чуть выше принципы сокращения для внешних отступов, которые ровно с таким же успехом будут работать и для внутренних.

И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border. У них есть три типа параметров:

  1. Border-width — задает толщину рамки
  2. Border-color — задает ее цвет
  3. Border-style — тип рамки или же тип линии, которой она будет отрисована

У всех этих трех CSS правил имеется допустимый набор значений:

Ширина линии для рамки (Border-width) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:

  1. Thin — тонкая линия;
  2. Medium — средняя (данное значение используется по умолчанию);
  3. Thick — толстая.

В качестве значения для цвета рамки (Border-color) можно использовать принятые для цветов в Html способы их задания (шестнадцатеричный код, слова и т.д.):

По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
CSS свойство Border-style позволяет задать словами тип рамки:

  1. None — без рамки (используется по умолчанию)
  2. Dotted — линия отрисовывается точками
  3. Dashed — пунктиром
  4. Solid — сплошной линией
  5. Double — двойной линией
  6. Groove — вдавленная рамка
  7. Ridge — выпирающая
  8. Inset и outset — игры с тенью

Естественно, что раз есть четыре стороны любого блока, то можно использовать как общие правила, так и отдельные для каждой из сторон:

Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:

Если что-то пропустить, то вместо него будет использоваться значение по умолчанию.

margin-top

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit. IE6 может неверно вычислять значение, заданное в % + + + +

Пример

Задаем верхний отступ для элемента p:

Описание и использование

Свойство margin-top определяет верхний отступ для элемента.

Примечание: негативные значения разрешены.

CSS свойство margin-top

Свойство margin-top используется для установления верхнего поля элемента.

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

Свойство не имеет эффекта на строчных элементах, подобно .

Значение по умолчанию
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Верхнее поле элемента анимируемо.
Версия CSS2
DOM синтаксис object.style.marginTop = «50px»;

Синтаксис

Пример

В следующем примере margin-top указано в единице измерения «em»:

Значение и возможности Margin в CSS

Magrin в CSS регулирует внешние отступы элементов. Элементы в html — это прямоугольники. Они имеют границы, поля и отступы.

Область полей (margin) — пространство за пределами границ элемента. Свойство используется для задавания расстояния между элементами и позиционирования их на странице.

Отступы

Свойство Margin в CSS может иметь значение в %, px, vh/vw, em и rem. Значение Margin может наследоваться от родительского элемента (inherit) или автоматически рассчитываться браузером (auto). Значения для Margin в CSS можно прописать множеством способов (приведены примеры в em — масштабируемых единицах, зависящих от размера шрифта элемента).

Способы задания значения отступам:

  • для каждой из сторон (top, right, bottom, left) элемента (например, указано значение верхнего внешнего отступа от края элемента center);

.center < margin-top: 1em; >

  • для противоположных сторон (сначала указывается значение для top и bottom, потом для left и right);

.center < margin: 1em, 0.5em; >

  • для трех сторон (первым указывается значение для margin-top, вторым — для left и right, третьим — для bottom);

.center < margin: 0em 1.1em 2em; >

  • для каждой стороны можно указать значения поочередно (margin-top, margin-right и т. д.) или в одну строку от top до left по часовой стрелке;

.center < margin: 0.5em 1em 1.5em 2em; >

  • значение элемента margin может быть одинаково для каждой стороны;

.center < margin: 1em; >

  • значение для margin может быть не задано;
  • значение margin может быть отрицательным, например, в CSS margin-top с отрицательным значением перемещает элемент вверх;

.center < margin-top: -1em; >

  • отрицательное значение margin может быть у всех сторон элемента, и тогда он «высвобождает» место для окружающих его элементов снизу и справа и «наезжает» на левый и верхний элементы;

Отрицательный отступ

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

С помощью отрицательных margin-left и margin-top можно «сдвинуть» элемент влево или вверх. Если на месте, куда перемещается элемент, уже есть объекты, тогда он их перекрывает.

Margin-bottom и margin-right не влияют на положение элемента, к которому применяются, но для других объектов он становится меньше. Благодаря этому на картинке блок с именем автора цитаты «залез» на блок с цитатой.

Auto и inherit

Использование auto в CSS у margin и text-align со значением center оказывают схожее действие. Auto центрирует элемент по горизонтали на равном расстоянии от границ контейнера.

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

Использование значения inherit подразумевает наследование значения от элемента-родителя. Допустим, родительскому элементу прописано значение в CSS margin-left, у элемента center стоит значение, указанное в предыдущем примере.

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

Использование в CSS Margin у body может привести к схлопыванию отступов. Обычно у body обнуляют значение margin, при необходимости отступов от элементов используют padding.

Соседние элементы

Из-за того, что внешние отступы, по сути, не являются частью самого элемента, они часто работают не совсем так, как можно было бы предположить, под влиянием других объектов. Одним из примеров такого влияния является эффект схлопывания отступов.

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

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

Вложенные элементы

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

На картинке приведены примеры поведения элементов и тогда, когда значения margin у родительского и дочернего элементов различны. Как видно, если у дочернего указано значение margin-top больше, чем у родительского, то родительский смещается именно на значение, указанное у дочернего элемента.

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

Пустые элементы

У пустых элементов будут схлопываться верхние и нижние поля. Причем формально они будут существовать, объект будет увеличиваться, но фактически на элементы, находящиеся рядом с ним, будет влиять только одно значение.

Исключения и правила

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

Проблем схлопывания между родительскими и дочерними элементами удается избежать только через вставку чего-либо между ними, например добавляя границу дочернему элементу. Для того чтобы схлопывания не происходило между соседними объектами, margin лучше прописывать в одном направлении.

Несколько общих правил использования margin:

  • лучше прописывать отступы в одном направлении для всех элементов (вправо и вниз);
  • формирование расстояния между элементами не должно происходить за счет дочерних элементов;
  • отступ дочернего элемента внутри родительского от границ родительского прописывают с помощью padding родительского, а не margin дочернего.

Margin в CSS — одно из свойств элемента, позволяющее управлять его расположением на странице по отношению к другим объектам. У свойства есть четыре вариации, позволяющие изменять положение элемента по горизонтали и вертикали. Одной из проблем использования margin является схлопывание отступов (объединение двух отступов в один).

CSS стиль margin-top. Установка отступа сверху с помощью margin-top

Internet Explorer 7 иногда некорректно вычисляет значение отступа, заданное в процентах.

Краткая информация по CSS-свойству margin-top

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства margin-top

Где auto — указывает, что размер отступов будет рассчитан браузером автоматически.

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

Объектная модель

Пример применения стиля margin-top

Проиллюстрируем работу margin-top на примере. Нам нужно, чтобы сверху от текста, вложенного в тег

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 » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS margin-top Property

Example

Set the top margin for a

element to 25 pixels:

More «Try it Yourself» examples below.

Definition and Usage

The margin-top property sets the top margin of an element.

Note: Negative values are allowed.

Default value:
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.marginTop=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
margin-top 1.0 6.0 1.0 1.0 3.5

CSS Syntax

Property Values

Value Description Play it
length Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units Play it »
% Specifies a top margin in percent of the width of the containing element Play it »
auto The browser calculates a top margin Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

In the example above, the

element has a top and bottom margin of 30px. The

element has a top and bottom margin of 20px.

This means that the vertical margin between

should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!

More Examples

Example

Set the top margin for a

element to 10% of the width of the container:

Example

Set the top margin for a

element to 2 em:

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Внешние отступы, свойство margin

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

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

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

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

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

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

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

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

Хотите писать JavaScript, используя современный синтаксис ES2020? Уметь тестировать свои программы? Записывайтесь на профессиональный курс по JavaScript второго уровня, проходящий c 18 ноября 2020 по 22 января 2020. До 18 ноября цена 23 900

Илон Маск рекомендует:  Что такое код ncurses_mvcur
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL