CSS box model

Over the last two days I've been doing something I haven't done for a while. Training.

I've been on a CSS course, and I left feeling as though I understood, and will remember and put into practice everything I learned.

Without doubt, the number one thing that stuck in my mind was the CSS box model, beautifully illustrated below.

The CSS box model is everything. It is the cornerstone behind using CSS for layout, and with a little practice and understanding the differences between IE6/7 and Firefox you can begin to use it as a foundation for all your web page designs.

You can find out more about the CSS box model at the World Wide Web Consortium.

Tell me and I will forget, involve me and I will understand!



Content - The actual content of the element such as text or an image. When using the CSS width property, you are actually defining the width of this content.

Padding - This is set around the content when you define the padding-top, padding-right, padding-bottom, padding-left and padding properties, the latter of which is the shorthand property.

Border - This is set around the content and padding when you define the border-top, border-right, border-bottom, border-left and border properties, the latter of which is the shorthand property.

Margin - This is set around the combined content, padding and border when you define the margin-top, margin-right, margin-bottom, margin-left and margin properties, the latter of which is the shorthand property.