Обратил такую закономернось, по margin в СSS3, хочу более подробно понять суть?

Question

[Юра Сторчака]

margin: o auto ; блок центрируется по горизонтали
margin: auto o ; блок не центрируется по вертикали, забивается в угол
не могу понять почему так, или это принимать как исключение и мириться с этим, что по вертикали не центрируется ?
буду благодарен за ответы, так как решил основательно изучить свойства magin, а то часто идет путаница

Answer 1

[Алексей]

Вам видимо просто надо почитать спецификацию. Вы вырываете свойство margin из контекста. В частности, чтобы margin: 0 auto; работало, элемент должен быть блочным и иметь фиксированную ширину. margin: auto 0; чаще использую с flex.
Выкладывайте полное описание стилей, только так можно судить почему у вас что-то работает, а что-то нет.

Comments

[Максим]

почитай историю его вопросов : https://otvet.mail.ru/html/

[Юра Сторчака]

Joy of TEX

[Юра Сторчака]

display: flex;
background: black;
color: white;
height: 300px;
width: 200px;
margin: auto o;
justify-content: center;
text-align: center;

[Alexander Litvinenko]

yrchi_k,

display: flex;
align-items: center;

только задать это надо не элементу который центрируешь, а элементу родителю, тоесть в котором центрируешь.

[Юра Сторчака]

получилось , спасибо , правда родителю нужно обязательно высоту указать , так как без высоты не работает центровка , я правильно понял ?:

[Alexander Litvinenko]

yrchi_k, через flex если задавать то и без высоты работает, но каким-то образом что-то всеравно должно создать высоту. Например могут быть два элемента рядом внутри, тогда контейнер будет по высоте большего а меньшый оцентрируеться.

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

Answer 2

[Alexander Litvinenko]

не могу понять почему так, или это принимать как исключение и мириться с этим, что по вертикали не центрируется ?

по вертикали центрируеться через flex
Суть не в margin, а в самом том что высота и ширина на сайте ведут себя по разному.
Ширина, если не менять вручную, ограничена шириной экрана.
Высота не ограничена ничем.

margin: auto создает одинаковые отступы на противоположных концах. Так как мы всегда знаем ширину контеннера-обертки и ширину контейнера-контента, то известны и сумарные размеры отступов, между ними.

Для высоты мы не знаем размеров контейнера-обертки, если он преднамеренно не задан, следовательно и не знаем размеров отступов. Потому большинство способов центрирования по вертикали требуют явно задать высоту.

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

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

Comments

[Юра Сторчака]

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

Answer 3

[Alexander Pushkarev]

Если родителю задать display:flex, то margin: auto o; будет работать.