Margin top auto не работает

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-top не работает?

Я пытаюсь добавить значения маржи на div внутри другого div. Все работает нормально, кроме верхнего значения, кажется, игнорируется. Но почему?

то, что я ожидал:

что я получаю:

код:

W3Schools не имеют объяснения, почему маржа ведет себя таким образом.

11 ответов

вы на самом деле видите верхний край #inner элемент коллапс в верхний край #outer элемент, оставив только #outer поле нетронутым (хотя и не показано на Ваших изображениях). Верхние края обоих ящиков расположены вплотную друг к другу, поскольку их поля равны.

вот соответствующие моменты из спецификации W3C:

8.3.1 рушится пределах

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

прилегающие вертикальные поля рушатся [. ]

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

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

• плавающий любой из ваших div элементов
• создание любого из ваших div элементов встроенные блоки
• задание overflow of #outer to auto (или любое другое значение, чем visible )

• поля между плавающей коробкой и любой другой коробкой не сворачиваются (даже между поплавком и его потоковыми детьми).
• поля элементов, которые устанавливают новые контексты форматирования блоков (например, поплавки и элементы с «переполнением», кроме «видимого»), не сворачиваются с их дочерними элементами в потоке.
• поля встроенных блоков не сворачиваются (даже с их дочерними элементами в потоке).

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

горизонтальные поля никогда не рухнет.

Источник

Неправильно работает margin-top

Между header и верхним краем браузера есть пробел который я не ожидал увидеть, а также не работает даже позиционирование top у элемента .company

2 ответа 2

Между header и верхним краем браузера есть пробел который я не ожидал увидеть

Это ожидаемо, так как этот пробел создается установленным для элемента company свойством margin-top: 560px;

а также не работает даже позиционирование top у элемента .company

Чтобы работало свойство top для элемента .company , необходимо этому элементу установить значение свойства position . Вероятнее всего, вы планируете определить расстояние от верхнего края родительского элемента general до верхнего края дочернего элемента .company . Предположим, что это так. Значит для элемента general нужно задать position: relative .

Теперь внесем все эти изменения в Ваш код:

Какой можно сделать из этого вывод?

Неправильно работает margin-top

В приведенном Вами вопросе код работает совершенно верно, согласно заданому Вами стилю. Вопрос в том, что Вы получили то, что получили, а не то, что планировали получить в результате. Ответ: margin-top работает правильно.

Чтобы таблицы стилей корректно работали, необходимо знать CSS синтаксис, набор правил при описании стиля, который описывает форматирование (изменение внешнего вида) отдельно взятых элементов на веб-странице.

Источник

Не работает margin-top

Помощь в написании контрольных, курсовых и дипломных работ здесь.

CSS Не работает margin-top/margin-left в IE, Firefox
Добрый день! Проблема в коде CSS .check > span< -webkit-transition: all ease-in-out.

Не работает margin-top
Здравствуйте! У меня не получается отделить блок с шапкой от меню, попытался поставить margin-top.

Margin-top не работает с сlear:both
Не люблю я почем зря трогать position, а иногда приходится. К примеру, когда юзаешь «clear.

. получаеться что при margin

Некорректно работает margin-top
Доброго времени суток. сразу скажу, поиск не дал результатов. мне нужно сделать так, чтобы ссылка.

в попсовых браузерах margin-top криво работает
решил вспомнить, что такое css и нашел такой баг в попсовых браузерах. Работает корректно только в.

Margin-top
Здраствуйте . Я начинающий в веб-программировании , и вот у меня проблема с CSS . block2 < .

Источник

Margin: auto и right:0, left:0, bottom:0, top: 0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

CSS Не работает margin-top/margin-left в IE, Firefox
Добрый день! Проблема в коде CSS .check > span< -webkit-transition: all ease-in-out.

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый блок опускается? .

Не совсем вопрос понял. margin: auto не работает в блоке, которому задан position: absolute ? Например:

Потому что ему задан position: absolute Если его убрать то блок выровняется только по горизонтальной оси, по вертикальной это работать не будет.

Потому что не все так просто Я кстати сам не помню или даже и не знаю почему не работает в таких случаях margin-top: auto and margin-bottom: auto не смотря на то что родительский блок имеет фиксированные размеры по ширине

Они управляет положением и размером элемента, то есть при top: 0; left: 0; он сместится в правый верхний угол. Если задать top: 0; left: 0; bottom: 0; rigth: 0 то он займет весь родительский элемент. В вашем случае можно так сделать

Решение

TOP, BOTTOM, LEFT, RIGHT, CUSTOM в jTabbedPanel
Где в netBeans или программно сделать, так чтобы jTabbedPanel был во всю форму независимо от её.

Напомните, пожалуйста, название свойства, позволяющего показывать часть контейнера, указав «top right, bottom left»
например, картинку размерами 100 на 100 пикселей с помощью этого свойства можно показать.

В чём разница между left и margin-left?
Доброго дня! Помогите, разобраться, пожалуйста, в чём разница между left и margin-left. .

Не работает margin-bottom
По коду должно быть так: главный блок с отступами в 30 пунктов по оси y (вертикаль). Сверху отступ.

Не работает margin-bottom
Здравствуйте. вот такая вот конструкция часто не хочет работать. в чем загвоздка и как ее.

Источник