display | more...

The CSS Box model is really quite simple. Every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. If you know the Art of the Table, you should be able to figure out how each plays out quite simply.

Here's a nice little ascii art about it.

     ------------------------------------
 (1) |                                  |
     |  (3)  This is the Content.       |
    (2)          Fear it not.           |
     |                                  |
     ------------------------------------

1. Margin, 2. Border, 3. Padding

There are two kinds of boxes, inline and block. Think of block boxes as page formatting tags, such as <p>, <div>, and <ul>. Think of inline boxes as text formatting tags, such as <b>, <i>, and <a>, and the content itself.

Log in or register to write something here or to contact authors.