[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-v-chem-raznitsa-mezhdu-margin-i-padding":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":18,"progress":19,"seo":20},1023,"v-chem-raznitsa-mezhdu-margin-i-padding",32,"osnovy-css","Основы CSS","🎨","В чем разница между margin и padding?","`margin` — это внешний отступ (расстояние от элемента до соседних элементов), а `padding` — внутренний отступ (расстояние от границы элемента до его содержимого).\n\n> Аналогия из жизни: представьте картину в рамке. `padding` — это паспарту (поля между картиной и рамкой), а `margin` — это расстояние между рамкой и стеной или другими картинами.\n\n| Характеристика | `margin` | `padding` |\n|---------------|----------|-----------|\n| Тип отступа | Внешний (от границы наружу) | Внутренний (от границы внутрь) |\n| Фон элемента | Не распространяется | Распространяется (видно background) |\n| Отрицательные значения | Допускаются | Не допускаются |\n| Схлопывание (collapsing) | Да — вертикальные margin соседей объединяются | Нет |\n| Клик по области | Не вызывает события клика | Вызывает событие клика |\n\n### Визуальная схема (Box Model)\n\n```\n+-------------------------------------------+\n|              margin (внешний)              |\n|  +-------------------------------------+  |\n|  |           border (граница)           |  |\n|  |  +-------------------------------+  |  |\n|  |  |       padding (внутренний)     |  |  |\n|  |  |  +-------------------------+  |  |  |\n|  |  |  |      content            |  |  |  |\n|  |  |  +-------------------------+  |  |  |\n|  |  +-------------------------------+  |  |\n|  +-------------------------------------+  |\n+-------------------------------------------+\n```\n\n### Схлопывание margin\n\nЕсли два блочных элемента расположены вертикально и у верхнего `margin-bottom: 20px`, а у нижнего `margin-top: 30px`, итоговый отступ будет 30px (больший из двух), а не 50px.\n\n> **На собеседовании:** интервьюер ожидает знание Box Model и феномена схлопывания margin. Частая ошибка — не упомянуть collapsing margins.","","junior",[15,16,17],"css","специфичность","селекторы",[],null,{"title":21,"description":22,"ogTitle":23,"ogDescription":24,"keywords":25,"schemaAnswer":32,"featuredSnippetReady":33},"В чем разница между #my и .my в CSS — Gymterview","Разница между селектором id (#my) и класса (.my): уникальность, специфичность, применение в JS, рекомендации BEM.","Разница между #my (id) и .my (class) в CSS — Gymterview","Сравнение селекторов id и class: уникальность, специфичность, практические рекомендации и BEM.",[26,27,28,29,30,31],"селектор id","селектор класса","#id vs .class","CSS специфичность","BEM","собеседование","#my — селектор идентификатора (id), .my — селектор класса (class). Id должен быть уникальным на странице, class может повторяться. Специфичность id (0,1,0,0) выше class (0,0,1,0). На практике для стилизации предпочтительнее классы: они переиспользуемы, легче переопределять, методология BEM рекомендует только классы.",true]