Почему враппер не вылазит за блок?

Question

[Antonio09]

тоесть немного не выпирает по вертикали
и снизу
и сверху
ведь задано

.wrap{
  margin: -20px 0;
}

https://jsfiddle.net/w8j51psx/

Comments

[Михаил]

а у секции что задано?

[Antonio09]

Михаил, если убрать стили для секции то принципиально ничего не меняется

[Михаил]

Antonio09, вообще-то меняется

[Antonio09]

Михаил, принципиально нет
тоесть то что нужно - нет
https://jsfiddle.net/yj1L3nzo/

[Михаил]

Antonio09, а что вам нужно то?

выпирает по вертикали

это чё

[Antonio09]

Михаил, чтобы .wrap выходил за .block
как снизу так и сверху
например, по 20px

[Михаил]

Antonio09, так шоль? https://jsfiddle.net/j24fyh91/

[Antonio09]

Михаил, ага
спасибо
а почему без padding: 1px 40px; не будет работать?
даже если задать min-height: 400px к примеру

[Михаил]

Antonio09, магия

[Александр Епихин]

Это не магия, это блочная модель. в данном случае margin схлопываются
Antonio09, если вы в своем примере у .block напишите display:flex, то будет так как вы хотите.

[Antonio09]

Александр Епихин, результат не такой https://jsfiddle.net/0j9zfqdx/

[Antonio09]

Михаил,
выглядит как костыль
может я не прав

[Александр Епихин]

Antonio09, какой не такой? В вашем первоначальном примере у блок нет боковых padding поэтому вы и не видите фон. Михаил любезно их добавил чтобы вы увидели что пример рабочий. Его пример не костыль, а демонстрация того как работает блочная модель. Это очень важный момент в верстке, вам стоит почитать про схлопывание margin, у кого и когда оно работает, а у кого и когда нет.

[Antonio09]

Александр Епихин, в том и дело
что нужно не padding: 1px 40px;
а так как Вы подправили - вместо padding: 1px 40px;. написать .block display:flex
это более смотритабельно