Difference between revisions of "CSS:BoxModel"

From mi-linux
Jump to navigationJump to search
 
Line 2: Line 2:
 
When using CSS, every element can be thought of as an object with several different boundaries.  The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS.  The picture below demonstrates the concept well:
 
When using CSS, every element can be thought of as an object with several different boundaries.  The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS.  The picture below demonstrates the concept well:
  
[[Image:boxmodel.png|The box model - from http://www.w3.org/TR/REC-CSS2/box.html]]
+
[[Image:boxmodel.gif|The box model - from http://www.w3.org/TR/REC-CSS2/box.html]]

Revision as of 12:42, 5 September 2007

The box model

When using CSS, every element can be thought of as an object with several different boundaries. The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS. The picture below demonstrates the concept well:

The box model - from http://www.w3.org/TR/REC-CSS2/box.html