CSS 101 | Part Sixteen - The Box Model

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 CSS 101 tutorials, you should be starting to develop a stable CSS foundation, understanding how to use CSS, what the most popular properties do, and etc. Now, we can get onto the nitty gritty.

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 is surrounded by a rectangular area that denotes its position within the document — this is called a 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 CSS 101 | 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 CSS 101 | 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 CSS 101 | 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.