The Box Model

The browser creates a rectangle for each element in the HTML document. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle.

The perimeter of each of the four areas is called an edge. Each edge defines a box.

The innermost rectangle is the content box. The width and height of this depends on the element's rendered content (text, images and any child elements it may have).

Next is the padding box, as defined by the padding property. If there is no padding width defined, the padding edge is equal to the content edge.

Then we have the border box, as defined by the border property. If there is no border width defined, the border edge is equal to the padding edge.

The outermost rectangle is the margin box, as defined by the margin property. If there is no margin width defined, the margin edge is equal to the border edge.

Inline and Block Elements

HTML has two primary categories of elements: block and inline. The box model applies differently to these two kinds of elements, so it is important to know the difference between them. Examples of inline elements include <a>, <strong> and <em>, whereas <p>, <h1>, and <form> are block elements.

Inline elements flow along with text content and are split as necessary to fit the width of their container. They may not contain block elements, with the exception of the element, which can wrap any type of element.