[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-v-chem-zaklyuchaetsya-raznitsa-mezhdu-znacheniyami-0-i-auto-v-svoystve-margin":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1024,"v-chem-zaklyuchaetsya-raznitsa-mezhdu-znacheniyami-0-i-auto-v-svoystve-margin",32,"osnovy-css","Основы CSS","🎨","В чем заключается разница между значениями 0 и auto в свойстве margin?","Значение `0` устанавливает нулевой отступ, а `auto` позволяет браузеру автоматически рассчитать отступ на основе доступного пространства.\n\n### Поведение auto\n\n| Ось | Поведение `auto` |\n|-----|-----------------|\n| Горизонтальная (left\u002Fright) | Занимает всё доступное пространство — используется для центрирования блока |\n| Вертикальная (top\u002Fbottom) | Эквивалентно `0` (не центрирует по вертикали) |\n\n### Центрирование блока\n\n```css\n.container {\n  width: 800px;\n  margin: 0 auto; \u002F* top\u002Fbottom = 0, left\u002Fright = auto *\u002F\n}\n```\n\nДля работы `margin: auto` по горизонтали необходимо, чтобы у элемента была явно задана ширина (`width`). Если `width: auto`, то `margin: auto` по горизонтали эквивалентен `0`.\n\n### Flexbox меняет правила\n\nВо Flexbox-контейнере `margin: auto` работает и по вертикали тоже — это один из способов центрирования элемента по обеим осям:\n\n```css\n.flex-container {\n  display: flex;\n  height: 300px;\n}\n\n.flex-item {\n  margin: auto; \u002F* центрирование по обеим осям *\u002F\n}\n```\n\n> **На собеседовании:** главное — объяснить, что `auto` по горизонтали центрирует (при заданном width), а по вертикали — нет (кроме Flexbox). Частая ошибка — не упомянуть требование явной ширины.","","junior",[15,16,17,18],"css","центрирование","box-model","отступы",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":33,"featuredSnippetReady":34},"Разница между margin: 0 и margin: auto — Gymterview","Разница значений 0 и auto в свойстве margin: центрирование блока, требование width, поведение во Flexbox по вертикали.","margin: 0 vs margin: auto — центрирование блока в CSS — Gymterview","Как работает margin: auto для центрирования, отличие от 0, поведение во Flexbox. Подготовка к собеседованию.",[27,28,29,30,31,32],"margin auto","margin 0","центрирование CSS","margin auto flexbox","горизонтальное центрирование","собеседование","Значение 0 устанавливает нулевой отступ, auto — браузер рассчитывает отступ автоматически. По горизонтали margin: auto центрирует блок (при заданной width), по вертикали эквивалентен 0. Во Flexbox-контейнере margin: auto работает и по вертикали — это способ центрирования по обеим осям. Для горизонтального центрирования обязательно задать width.",true]