Skip to main content

A Beginner's Guide to CSS | Part Sixteen - The Box Model

Submitted by helen on Monday, May 30, 2011 - 17:36; Modified on Thursday, August 18, 2016 - 11:15

We perhaps should have covered this at the beginning of the series, but I wanted to give you a feel for CSS before delving into the more technical side of things. If you've followed my other A Beginner's Guide to CSS tutorials, you should be starting to develop stable CSS foundations and understand how to use CSS and its properties. Now, we can get onto a concept that you really need to know, if you want to be any good at CSS: the box model.

What is the box model?

The box model is actually a fairly simple concept, despite sounding like some sort of complex mathematical law. In CSS, every element in a document is surrounded by a rectangular area that denotes the element's position within the document — this is referred to as the element's box. The content that is physically rendered on screen is called the box's content area and can be surrounded by padding, borders and margins.

The box model is an important concept because it tells you how your elements are rendered within the document tree, which, in turn, determines their behaviour when manipulated by various CSS properties.

Borders

Borders are applied within the box, and, as such, contribute to an element's dimensions. When there is no border surrounding an element, the border is said to have zero thickness. For more on how to use borders in CSS, check out A Beginner's Guide to CSS | Part Twelve - Borders in CSS.

Padding

Padding is applied within the box and contributes to an element's dimensions. Padding is only visible when you give an element a background; you will see the padding area surrounding the element as padding can be thought of as taking on the background colour of the element. When there is no padding surrounding an element, the padding is said to have zero thickness. For more on how to use padding in CSS, check out A Beginner's Guide to CSS | Part Fifteen - Margins and padding.

Margins

Margins are applied within the box, but they do not contribute to an element's dimensions. Unlike padding, they can be thought of as transparent, because an element's background does not show through them. When there are no margins surrounding an element, the margin is said to have zero thickness. For more on how to use padding in CSS, check out A Beginner's Guide to CSS | Part Fifteen - Margins and padding.

Negative margins

It's useful to note that negative margins can be applied to an element, which is how elements are able to overlap other elements, while remaining within the flow of the document (unlike applying absolute positioning to elements, which takes them out of the flow of the page). To give an element a negative margin, you simple use the minus sign, as such:


margin-top:-20px;

That's basically it. Now you know how elements fit within the page, which should give you a better understanding of what the CSS properties actually do to an element. If you're struggling to grasp this, or you feel I haven't explained the concept very clearly, feel free to get in touch and I'll do my best to help you out.