CoderZone Sandbox: CSS Boxes: DIVs and SPANs
Two central elements in CSS are areas referred to as "divs" and "spans". Both are 4-sided rectangular areas that can contain other HTML elements. Divs and span are similar in many respects but vary in some fundamental ways. To understand divs and span properly, you must first understand what is referred to as the "box model". The term "box model" is used to describe the inner and outer zones around elements, including divs and spans.

In order, from outermost to innermost, these are the definable areas in the box model:

  1. The margin area is the reserved area around the border. Note that margins are transparent and do not have a color property.
  2. The border area encloses the padding and content areas. Borders do have a color property (and take on the background color of the box if not set).
  3. The padding area is the reserved area around the content area. The padding area inherits the background color of the box.
  4. The content area is where other HTML elements (typically text and images) are normally placed. The content area inherits the background color of the box.

By default all of the areas have a height of zero. The default width for a span is also zero, but for a div it is 100% of whatever contains it (a tablle cell, another div, the browser window, etc).

Each area can be assigned spacing, in pixels, percent, centimeters, inches, millimeters, points, picas, 'ex's or 'em's (for a complete description of CSS measurement units, please visit the page on CSS Measurement Units). The assigned area can be positive or negative (for example, a negative margin).

Edit code in the area below, then click the "Test It" button:
Result of your code:
   Back to Sandbox 
© | users online: 5