3D diagram of CSS2 box model

follows the box model specification. Box model definition margin, background-color, background-image, padding, content, border, beginners often don't know the level, relationships, and interactions between them. Here is a 3D schematic of a box model, you want to make your understanding and memory.

Original map: HicksDesign

It should be noted that the IE and Mozilla browser are inconsistent with the interpretation of the box model, causing the difficulties in our positioning, mainly different:

When IE calculates the distance between 2 DIVs, the 1PX Border is calculated, while Mozilla is not; after setting the width of the DIV, if you add a value to Padding, IE will subtract this value within the width, and M Ozilla will add this value based on the width.