Also, there is some leeway provided within the standards where individual browsers are free to deal with situations as they please. Where appropriate these inconsistencies are noted. The Box Model 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.
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. Margins, borders and padding are all optional but for purposes of calculating positions and sizes they are given a default width of zero if not specified. Margins can even have negative values. The width and height of each box is equal to the width and height of the outer margin box.