3D CSS Box Model

20 May 2004

Here’s the thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

(Updated: 21.5.04): Added keylines to show ‘fitting’ and changed the background image to be more obvious. Others have now done their own versions, Tom has created a black & white printer friendly version and Douglas has created an interactive version – great work chaps.

There is now a French translation available here.

Recent Posts

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Troika #31: Dusk

06 Sep 2017

Icon Design Process talk at Reasons To 2017

06 Sep 2017

Instagram Hickstagram

  • 25 Feb 2018

    Lucienne Day exhibition at the Oxfordshire Museum 👌

  • 25 Feb 2018

    Knobbly

  • 24 Feb 2018

    The beast

  • 17 Feb 2018

  • 16 Feb 2018

  • 16 Feb 2018

    When your robot cephalopod needs attention

  • 16 Feb 2018

    With a little help from my friends…

  • 11 Feb 2018

  • 11 Feb 2018

    That Foo Fighters tour shirt was prophetic :(

  • 02 Feb 2018

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom