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 http://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.
Please Note : This has now been updated and moved to its own section here.
Here’s a 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.
Archives by tag:
2006,
2007,
accessibility,
acoustic,
actionscript,
adobe,
advert,
adverts,
advice,
air,
alternative,
ambient,
analog,
apple,
applecare,
appletv,
apps,
appstore,
art,
articles,
atmedia,
attap,
audio,
australia,
awards,
ban,
basecamp,
bbc,
belkin,
bitmap,
blackhole,
blogs,
bluetooth,
bonecho,
books,
boxee,
boxeebox,
boxmodel,
braindump,
britain,
british,
browser,
browsers,
browsers.mozilla,
bug,
bugs,
cairo,
cakes,
calendar,
camera,
camino,
casestudies,
cbbc,
cc,
chap,
chaps,
cheerup,
cheese,
childreninneed,
christmas,
cinelli,
cms,
cocoalicious,
coda,
code,
collections,
colour,
colourblind,
colourblindness,
comedy,
comments,
comps,
conferences,
copywriting,
cotswolds,
country,
covers,
craft,
cs5,
css,
css.webstandards,
cycling,
danielsmonsters,
delicious,
dell,
design,
design.colourblindness,
desktops,
digital,
discovery,
discussion,
dock,
doctorwho,
dogs,
drawing,
dream,
dreams,
dropbox,
drwho,
education,
electronica,
email,
emoticons,
england,
events,
evernote,
expressionengine,
eyetv,
family,
feedback,
femalevocal,
figures,
films,
firefox,
fireworks,
firstworldproblems,
flash,
flexible,
flickr,
flock,
fonts,
found,
foundries,
foundsounds,
fowd,
free,
frontrow,
ftp,
g5,
games,
gaming,
gardening,
garlic,
geek,
geekends,
geekery,
geekmediabox,
genius,
gentleman,
gifs,
gigs,
google,
googlereader,
grammys,
graphics,
greader,
grids,
gtd,
hacks,
handbag,
handbags,
hardware,
harrypotter,
helvetica,
helvetireader,
heros,
hicksdesign,
history,
holiday,
hosting,
howto,
html5,
humanrights,
icab,
ical,
ichat,
icon and interface design,
icon design,
iconhandbook,
icons,
ideas,
illustration,
illustration/icon design,
illustrator,
illustrators,
im,
images,
indesign,
infographics,
inspiration,
installation,
intel,
interface,
interfaces,
internet,
internetexplorer,
interview,
interviews,
inventions,
ipad,
iphone,
iplayer,
ipod,
itsmyblogandillbangonifiwantto,
itunes,
javascript,
jobs,
journal,
justabitoffun,
leaflets,
lego,
leigh,
lifeio,
links,
list,
listening,
lists,
littlebigplanet,
logo,
logo and branding design,
logo design,
logos,
london,
londonbombing,
mac,
macbook,
macmediacentre,
macmini,
macs,
macworld,
magazines,
magazines.illustration,
making,
maps,
mediacenter,
mediacentre,
mediacentres,
mellow,
memes,
menus,
merchandise,
messages,
metal,
microformats,
microsoft,
modernart,
moleskine,
monkeybutler,
movabletype,
movies,
mozilla,
music,
myob,
natural,
nerdery,
news,
nintendo,
nostalgia,
nostradamus,
notes,
obituaries,
office,
omniweb,
opacity,
opensource,
opera,
organisation,
os,
osx,
oxford,
oxfordgeeknight,
packaging,
panic,
panther,
paper,
parallels,
penguin,
people,
photo,
photos,
pimp,
pipes,
plex,
plugins,
png,
podcast,
polygamy,
posters,
powerbook,
practice,
presentation,
presentations,
presents,
press,
print,
printmaking,
productivity,
propoganda,
ps3,
published,
punditry,
questions,
quicksilver,
quotes,
radio,
radiohead,
raf,
railway,
rants,
rapha,
resources,
responsive,
retorts,
retro,
review,
reviews,
riffs,
rip,
ripoffs,
rissington,
rss,
safari,
saft,
sage,
samantha,
science,
scifi,
scrapbook,
scripts,
security,
server,
shelf,
shiira,
sideprojects,
signage,
simplenote,
sites,
siteskin,
siteskins,
sixties,
skinning,
skype,
slides,
slowcore,
software,
solutions,
songbird,
sony,
sound,
spam,
speakers,
speaking,
sponge,
spotlight,
starflyer59,
starwars,
stationery,
store,
summerboard,
surveys,
svg,
sxsw,
syncing,
tagging,
talks,
tea,
teasing,
templates,
ten,
texpattern,
text,
texteditor,
texteditors,
textile,
textpattern,
thebeatles,
theme,
themes,
theming,
thenational,
theory,
tiger,
timeline,
tips,
toys,
tumblr,
tv,
tweed,
typefaces,
typography,
ui,
updates,
updtes,
userstyles,
vector,
veer,
versions,
video,
vinyl,
vw,
wallpaper,
web,
webapp,
webapps,
webbies,
web design,
webfonts,
webkit,
website and logo design,
website design,
webstandards,
whitenoise,
why,
widgets,
wifi,
wii,
windows,
wireframing,
wishlists,
wordpress,
work,
working,
xhtml,
xul,
yojimbo,
youtube,
zengarden
Twitter
Flickr
Zootool
Last.fm
Vimeo
Huffduffer