3D CSS Box Model - The easiest way to explain CSS' Box Model core

Having seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements are stacked, I decided to try and fill this hole, and draw a 3D CSS Box Model.

There's also an interactive Flash version to move around and play with!

The Flash version is also linked on the diagrams site.

Also, for reference, the official W3C diagram for CSS' Box Model.

Chris Charlton

Chris CharltonChris, Los Angeles' CSS & ActionScript guru, successfully cannonballed into web development in the late 90's. Always caught up with the latest in Flash, Dreamweaver, Fireworks, and XML, Chris authored premium articles for the largest Dreamweaver/Flash community (www.DMXzone.com) and produced WebDevDesign (iTunes featured), a popular Web Design & Development Podcast. Somewhere, Chris finds time to run an authorized Adobe user group focused around open source and Adobe technologies. Being a big community leader, Chris Charlton remains a resident faculty member of the Rich Media Insitute and lends himself to speak at large industry events, like JobStock, NAB, and FITC Hollywood.

Brain cycles from Chris are always Web Standards, Flash Platform, and accessibility.

See All Postings From Chris Charlton >>

Comments

Be the first to write a comment

You must me logged in to write a comment.