To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. The illustration below shows these various parts.

Margins are always transparent. Borders come in various styles. Background settings for an element apply to the the area just inside the borders which includes both the padding and content areas. For purposes of illustration however, the padding area is shown in a slightly darker color.


content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

    margin     border     padding     content 

<div style="border-color: #000000; border-style: dotted; border-width: 1px; font-weight: normal;  padding: 1em;">
  <div style="background-color:#d0d0d0; border-color: #000000; border-style:solid; border-width: 4px;  padding: 1em;">
    <div style="background-color:#f0f0f0;font-size: 12pt;">
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    </div>
  </div>
</div>