The following diagram visualizes how the various CSS style elements are connected together, and most importantly what goes where. Handy for both the novice and the more advanced designer (in case your brain’s out for lunch – could happen you know…).
Having seen umpteen diagrams showing 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.
About Author
