1996. What a time to be alive! Grunge was reaching its peak, cementing Gen-X anti-commercial irony as the "vibe" of the decade, The Craft had just hit cinemas triggering a teenage girl led witchcraft revival, and David Foster Wallace had just released Infinite Jest - a satirical, maximalist takedown of late-capitalist society's slide into an entertainment and pharmaceutical induced coma, important reading to be sure, except the thing was like 1000 pages long so nobody actually read it.

Oh yeah, and Tipper Gore - wife of Vice-President Al Gore - horrified at discovering her 11-year-old listening to Prince, led a crusade against "obscene music", culminating in this iconic sticker being plastered on albums and, inadvertently, driving up sales of obscene music world wide. A Tipper Gore led revival of obscenity, if you will.

(If I walked in on my 11-year-old daughter listening to Prince I'd just be intimidated.)

Anyway, while flannel-clad young adults listened to Black Hole Sun and pretended to read Infinite Jest, my babysitter practised Wicca, and Tipper's daughter grooved to Purple Rain, a bunch of brainiacs over in Switzerland were getting together at the European Organization for Nuclear Research (CERN) and, between intense bouts of yodelling, tried to figure out how to make the internet look less, well, shit.

The solution was created by a Norwegian (classic Norway, Always solving stuff). Enter Håkon Wium Lie, taking a short break from his hobbies of woodworking, and permaculture to invent Cascading Style Sheets (CSS).

In 1996, Håkon and his horde of vikings team of engineers rolled out a major new update for CSS that would radically change the way the internet looked and create the visual framework for essentially every website and mobile app now in existence.

No biggie.

And, in typically verbacious software engineer style, they would give this revolutionary new innovation a truly extravagant name:

box

Fun fact: here is a scene from inside CERN where the box model was invented.

Prior to the CSS Box Model websites more or less just looked like Tim Berners-Lee’s debut website. In my opinion, it actually doesn't look horrible - but that's beside the point. The whole internet just simply couldn't look like that, it would cause pandemonium, chaos! CSS's Box Model brought a second dimension to websites by putting all HTML elements into cute little boxes with five changeable dimensions:

1. Height
2. Width
3. Padding
4. Border
5. Margin

Height and width of each box is kinda self-explanatory (although as you scratch on those topics, turns out they actually aren’t.)

Border is also kinda obvious – it refers to any kind of line (solid, dotted, dashed...) surrounding the “box”.

Padding is the space between the border of the box and the content within the box.

Margin is the space around the border of the box.

Used well, borders create crisp lines that help to delineate the 2D space on a website and create a sense of order. Padding and margins, added judiciously, can create a sense of harmony, balance and space on the page.

Used poorly, well your website risks ending up looking like Picasso and The Yale School of Art's website's love-child.

Hmmm, that would actually be kinda rad.