CSS uses a smart metaphor for assisting you to identify containers (block-level elements) on your page: the box. When you describe formatting for your block-level elements— whether they be paragraphs, blockquotes, lists, images, or whatever—for purposes of CSS, you are defining formatting for a box. It doesn’t care what is in the box; it just desires to format the box.

Box dimensions
The primary thing the browser does is render the block-level element to determine what the physical dimensions of the element are, specified the font selected for the element, the subject of the element, and any other domestic formatting instructions provided by the style sheet. Then the browser looks at the padding, the border, and the margins of the element to determine the space it actually requires on the page.



Padding is the remoteness between the outside edges of the element and the border. The border is a line or ridge. The margin is the space between the border and the outer box of the next container.