Как правильно задать margin для вложенного блока?

Question

[Дмитрий]

Всем привет. Подскажите, плз, как можно для вложенного блока задать внешний отступ?
Пример: https://codepen.io/kashamalasha/pen/yOoyVX?editors=1100
В примере отступ задан как padding для контейнера, но использовать его не хочу.

.header {
   padding: 10px;
}

Заранее спасибо.

Answer 1

[Андрей Б.]

Это такая особенность margin. Должны быть ограничивающие свойства, иначе margin будет переходить от внутреннего блока к внешнему.

Решить это можно задав родительскому блоку border 1px solid transparent или overflow любое значение кроме visible.
Лично я использую padding.

Comments

[Дмитрий]

Большое спасибо за overflow. Интересное свойство, особенно то, что его также можно использовать для предотвращения выпадания из родителя для float.

Answer 2

[Сергей Тутуков]

Как сказал Андрей, все решается oveflow
https://codepen.io/STutukov/pen/YqxPRz?editors=1100

.header {
    overflow:hidden;
}
.center-wrapper {
    margin: 10px auto;
}

Comments

[Дмитрий]

Для .header .name, мне кажется, более логично отступ установить, чем для обертки, которая может к другим элементам применяться.

[Сергей Тутуков]

Как угодно.
Это всего лишь пример)

[Дмитрий]

Спасибо)