The box model

With "box model" the idea of handling space to neighbors and content ist meant. This is much like in html, but here the specifications are different.

The margins determine the space required to be left to each side. They are added to the width of the element and never visible. Paddings (space to content) are part of the element (unlike standard in html, or like box-sizing: border-box, or if anyone remembers the old internet times and IE - they implemented this as standard). So if we have an element with a width of 100px and paddings of 5px on all sides that would leave (100-2*5 = 90)px for the content

The border is part of the element (at the moment at least) and does not interfere with padding (again unlike html where they are added). So if we add a border of 3px thickness to the example, that still makes 90px for the content.

Some visual examples:

1. Three elements in a container without paddings or margins
2. Adding padding to container makes elements move
3. Now adding margins to all inner elements. They move apart from another and need more space from the container top and left
4. Finally individual margins for the inner elements.