CSS BOX Model

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.

Your content here
Margin:
20px
Padding:
10px
Border Width:
15px
Height:
260px
Width:
500px

Generated CSS:


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.