The CSS Box Model

My Sushi Sample

Every element in a webpage is in its own box – the heading up there, this paragraph, the images below – although it may or may not really look like a box. The Box Model is a standard in CSS and is used in laying out and presenting HTML.

Each box has four layers and I love sushi so to illustrate let’s make sushi! There are heaps of types of sushi but we’ll stick to the classic Salmon Maki Sushi Roll for now.

The following code produces a piece of sushi (view from the top).

I know, I know, it's not nearly as appetising as the real thing but it’ll do (I hope!).

Here's a prettier version with each layer labelled.

sushi with the box model layers labelled.

Content

This is your element (your text or your image), this is your fresh salmon fillet. We can set the dimensions of the Content using the width and height properties.

Padding

This is the area around your Content, this is your cooked sushi rice. Want more rice? Sure can do! Just increase the padding property.

Border

This is the Toasted Nori (dried edible seaweed) that goes around your Padding. It would be good to note that some types of sushi may not be wrapped by Nori but something else like more fish or sesame seeds. Depending on the type of sushi you are making, you can specify the border colour, width, radius, or style.

Margins

This is the area outside the border; it is the whitespace between each box in the webpage. To see how this works let’s get some more sushi and line them up like so. We can increase the space between each sushi by increasing the margin property.

several pieces of sushi spaced out evenly — Sushi Roll Vectors by Vecteezy

And these pieces here have no margin.

six pieces of salmon maki sushi plated together — Sushi Roll Vectors by Vecteezy

Now it's your turn to make sushi (here's a copy of the pinksquare image I used). Enjoy!

I'm off to have me some real sushi… till next time!