Information on how to use margins

Question

I need some info on how to use margins and how exactly padding works.

For example: Should I put a line to occupy the whole width of the page (no matter what resolution is used to display the web page) letting just a small border on each side, how could I achieve this?

Answer 1

Have a look at this: http://redmelon.net/tstme/box_model/

Basically, an element consists of content, surrounded by its padding, then the border, then the margin. Background images only extend as far as the border. Margins are best described as 'the whitespace around this element'.

But have a look at the URL above, and make yourself a test page to have a play with, it should all make sense.

Answer 2

I think this should do what you want:

<table width="100%" cellpadding="5">
  <tr>
    <td>
One, two, three ... One, two, three ... One, two, three ... One, two, three ... One, two, three ... One, two, three ... One, two, three ... One, two, three ... One, two, three ... 
    </td>
  </tr>
</table>

Setting width to "100%" forces the text to use the full width, and setting cellpadding to "5" sets a unvisible border of 5 pixels.

Answer 3

Another way to illustrate it is in the box model, padding is the inside "margin" of a box margin is the buffer around the box.