(click anywhere to close)

[CSS3] The Box Model

category: Website | course: CSS3 | difficulty:

As far as CSS is concerned, all HTML elements are little boxes. Boxes with certain dimensions and position, with a border and some empty space.

Whatever the shape of its children or parent elements, everything is a box. This may seem as if it restricts your options (what if you wanted a circular element?), but it actually enables you to create a vast array of different designs in an easy way. Rectangles are simple and intuitive geometry, especially for rectangular browser windows, which means it isn’t hard to find out what effect a certain CSS declaration will have.

A Very Important Image


Remember this image very well. It is a very simple overview of what lies at the core of CSS. Every box can be styled with these properties to be at any position, at any size. Using padding you can even position and scale the content that is inside, while the border provides a way to distinguish different elements on the page.

Whenever you create a new design for anything on your website, I think it is useful to always start with the box model. First look at those basic properties and see what you can get by only setting those, and only then look further to more advanced properties to achieve the exact look you want.

For example, say you wanted to offset a certain element X, 100 pixels to the right. You could place an element before X in the HTML structure, and make that element a hundred pixels wide. But, the easier way would be to make the left margin of X one hundred pixels exactly.

Seriously, everything’s a box

Even the body element that is required for every HTML page. Most browsers automatically add some padding to this element to offset all content from the sides of the browser window – much like there’s always some white space around the borders when you print something on A4. Keep this in mind, and know that you could just select the body element with CSS to override those standard rules.

Test your knowledge with the quiz!
What does the term Padding mean?
Outline or stroke around an element
Empty space around an element
Empty space within an element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk