Ответ
Margin — это внешний отступ элемента, создающий пространство за пределами его границы. Padding — внутренний отступ, увеличивающий расстояние между содержимым и границей элемента.
Пример:
.box {
margin: 20px; /* Отступ снаружи */
padding: 10px; /* Отступ внутри */
border: 1px solid black;
}Ключевые отличия:
- Margin влияет на расстояние между элементами, padding — на внутреннее пространство.
- Margin может иметь отрицательные значения, padding — нет.
- Margin схлопывается (у соседних элементов отступы объединяются), padding — нет.
- Padding учитывается в размерах элемента при
box-sizing: content-box(по умолчанию).
Ответ 18+ 🔞
А, ну ты про эту классику, про margin и padding! Ну что, разберём, как устроена эта магия, а то некоторые до сих пор путают, где у элемента жопа, а где лицо.
Смотри, margin — это как твоя личная зона отчуждения, сука. Элемент говорит: «Отъебись от меня на 20 пикселей, я тут медитирую». Это пространство снаружи его границы. А padding — это его внутренний буфер, чтобы контент не прилипал к стенкам, как голый мужик в душевой кабинке. Пространство внутри границы.
Вот смотри на этот кусок кода, тут всё наглядно:
.box {
margin: 20px; /* Отступ снаружи */
padding: 10px; /* Отступ внутри */
border: 1px solid black;
}Представь коробку. border — это сама картонка. padding: 10px — это пенопластовая прокладка внутри, чтобы хрустальная ваза твоей бабки (это контент) не дрынкалась о стенки. А margin: 20px — это охранная зона вокруг коробки на складе, чтобы соседние коробки не пихались.
А теперь главные фишки, где все ебутся:
-
Влияние. Margin расталкивает элементы друг от друга. Padding — раздувает внутренность элемента, отодвигая контент от его краёв. Если ты добавишь padding, элемент станет толще, как булка после новогодних праздников.
-
Отрицательные значения. Margin может быть отрицательным, типа «подвинься ко мне, сучка, я хочу быть ближе». Это как залезть соседу на колени в переполненной маршрутке. А padding — никогда. Какая, нахуй, отрицательная внутренняя прокладка? Это уже не padding, а дыра в пространстве.
-
Схлопывание. Вот это, блядь, адская тема. Margin'ы по вертикали у соседних блоков иногда схлопываются. Если у верхнего блока margin-bottom: 30px, а у нижнего margin-top: 20px, то расстояние между ними будет не 50px, а те самые 30px (берется больший). Они как бы сливаются в один отступ. Padding так не умеет, он честный, как шведский социализм.
-
Влияние на размер. Тут зависит от
box-sizing. По умолчанию (content-box) padding увеличивает итоговые габариты твоего блока. Задал ширину 200px и padding 20px? Получил жиробаса шириной уже 240px (200 + 20 слева + 20 справа). А если поставишьbox-sizing: border-box, то padding будет съедаться изнутри заданной ширины, и блок останется аккуратным 200-пиксельным красавчиком. Margin же всегда считается дополнительно, поверх любых размеров.
Вот и вся философия. Margin — это «отойди нахуй». Padding — это «не дыши мне в затылок, я сам внутри». Запомни, и будешь верстать, как боженька.