Как сделать отступы для контейнера?

Question

[Никита]

Для примера, простая страничка состоит из трех блоков: header, main, footer. В main содержится container. Задаю свойство margin для контейнера. Почему отступ сверху появляется между main и header, а не между container и main?
https://jsfiddle.net/s0z5tv4t/

Comments

[Денис Васильев]

Это схлопывание маржинов. Почитайте softwaremaniacs.org/blog/2005/09/05/css-layout-flo...

[Никита]

Денис Васильев: Спасибо, почитаю.

Answer 1

[Александр Латышев]

margin - это внешний отступ, вместо него Вам нужно использовать padding-top для блока main

Comments

[Никита]

padding меняет размер блока, мне это нежелательно. В данном примере это легко скорректировать, но если я установлю высоту в процентах то получится не то, что нужно.

[Александр Латышев]

Ну как-бы уже почти стандартом стало использовать box-sizing: border-box, чтобы ширина контейнера и отступы работали как полагается, т.е. не зависели от контента, а чтобы контент зависел от контейнера.

[Никита]

Александр Латышев: Во, то что надо, кажется. Спасибо, я не знал про box-sizing.