CSS Box Model
The CSS box model representing the design and layout of your site. It consists of margins, borders, padding, and finally your content.
Visual layout of the box model
The middle white area inside the dotted box is where your content located which now labeled Content here. The color is representing your border between padding and margin. The space between border and the dotted content area represents the 'Padding'. Padding is the space between the border and your content. The color is the margin of HTML Element which covers the outer area. Try playing with the above live box using the sliders to change value and you'll get the idea in no time.