One of the things I always admired about second and third generation websites was how photos, ads, or text blocks were so nicely displayed, with subtle borders or other effects that gave the site a more professional look. These 'special effects' were nothing more than the creative use of borders, margins and padding (a few others, such as background, will be covered later).
To understand how to apply borders, margins or padding, it's important to understand something about how elements of HTML and XHTML are represented internally within the browser.
It may sound strange, but each element (I mean anything displayed by the browser, like letters, images, form controls, tables, etc.) has an 'invisible box' around it. Actually, it's invisible by default, but you can change that easily as you'll see on the next page.
Using CSS you can change different properties of the box around the element, including: (you guessed it) borders, margins and padding, among others. You can specify just one measurement (for the padding or margins) and it will be used for all sides, or you can specify a different value for each side if you wish.
Take a look at the following diagram to get an idea of hows the browser uses this concept:
The reason that Figure 1 shows "top, right, bottom and left" within padding, border and margin, is that you can, using CSS, specify the properties of each side of the box separately.
You usually see this used where you want to have a certain amount of spacing on one side of a paragraph or image, and another amount on the other.
It can be to create bizzare borders (but why would you want to?) like a dotted red line on top that is 14 pixels thick, a blue solid line on the right, a green dashed line on the bottom, and no border on the left. Now let's see how this looks with some real examples to illustrate the concepts on the next page.