@yrchi_k
учусь веб разработке

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

margin: o auto ; блок центрируется по горизонтали
margin: auto o ; блок не центрируется по вертикали, забивается в угол
не могу понять почему так, или это принимать как исключение и мириться с этим, что по вертикали не центрируется ?
буду благодарен за ответы, так как решил основательно изучить свойства magin, а то часто идет путаница
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 3
AlexMaxTM
@AlexMaxTM
Вам видимо просто надо почитать спецификацию. Вы вырываете свойство margin из контекста. В частности, чтобы margin: 0 auto; работало, элемент должен быть блочным и иметь фиксированную ширину. margin: auto 0; чаще использую с flex.
Выкладывайте полное описание стилей, только так можно судить почему у вас что-то работает, а что-то нет.
Ответ написан
edli007
@edli007
full stack, team lead

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

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

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

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

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

Если хотите узнать больше о margin, рекомендую также почитать про эффект схлопывания марджинов.
Ответ написан
Если родителю задать display:flex, то margin: auto o; будет работать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы