You’re reading all articles tagged 'boxmodel'

3D Box Model is now Creative Commons

25 Apr 2005

Since I posted the original 3D CSS Box Model diagram, I’ve had a lot of requests from people who want to re-use and/or adapt it. I always intended that it be free for the taking if someone found it useful, but people seem to like the security of a legal document. So its now released under a Creative Commons license to do with as you wish, and has been moved to a more permanent location at https://www.hicksdesign.co.uk/3dboxmodel.

Also, as Dunstan pointed out to me, the content is actually on top the of the border, rather than underneath it. You have to do some negative margin tom-foolery to see this, but I’ve updated the original diagram to take this into account.


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.


Instagram Hickstagram

  • 22 Oct 2018

    Inktober Day 22. Well, @hicksmade left me with a toughie to follow. Here’s my attempt at Dali taking his pet anteater for a walk. #inktober #inktober2018 #leighandjondoinktober #dali

  • 21 Oct 2018

    Inktober Day 21, another bird (sorry @hicksmade)! This is the Snipe that I watched from the hide at Rusty Common on Friday. Lovely birds with beaks that defy the body they’re attached to. #inktober #inktober2018 #leighandjondoinktober #snipe

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

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