In this – our first genuine post – I will describe these three elements and how they interact with the content of our pages. Understanding the box model and positioning is key to create aesthetically salient and visually pleasing websites.

Exciting stuff.

Although w3schools is clinically accurate, I prefer to imagine each element as a picture frame on a wall.

If we focus on one of the frames, we can see that it is different from the rest but it also shares some similarities with the group.

Look at these photographs. Each frame is full of content and these images have both a height and a width.

External to the content we find the padding. Visualised here as completely enveloping the content, however the top, bottom, left & right properties can be edited individually or removed all together.

The third element of the box model is our border. Below you’ll see this makes up the frame of the image and much like a picture frame can be entirely customed with properties such as thickness, style, color, etc.

Lastly, we find the space beyond the frame, the wall if you will. Much like padding, this can be visualised as a box.

Or edited individually, creating the borders between objects.

Or the entire wall, moving everything away from the edges of the page. My photoshop license expired halfway through editing these pictures so you might have to use your imagination.

Or consult the markup below:

Margin & padding are to be taken most seriously. One small edit and you’ll break your entire heckin' page.

so study up.