What Is The CSS Box Model?

Date First Published: 25th July 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 7/10

Learn more about what the CSS box model is in this article.

In CSS design, the box model is a container that consists of four properties that wrap around each HTML element. It is a very important concept for the structure of HTML pages. The properties of the box model include:

• The content - Where all the elements of the box appear, including the text, images, and other elements.
• The padding - This property is transparent and clears an area around the content. It is the space between the border and content of an element.
• The border - This property allows a coloured line of a defined width and style to go around the content padding area.
• The margin - The final property that is transparent and clears an area around the border. It defines the space around a HTML element.

These rectangular boxes are generated for elements in the document tree, which every HTML document can be referred to as the elements in a HTML element are formed in a tree structure. The use of this model is beneficial as it will help specify and determine the structure of a HTML or XHTML element, such as the space between elements and the borders around elements. It was introduced by the W3C and is now used to specify the layout of everything on the web.

Calculating Total Width

The total width of an element can be calculated by the box model. Adding up all of the properties, such as width, padding, border, and margin will give the total width. When defining the width and height properties of an element in CSS, all that is defined is the width and height of the content. The padding, borders, and margins must be added in order for the full size of a HTML element to be calculated.

In the example above, the <green-div-box> element below will have a total width of 518 px as:

The output of the HTML document can be seen below in the screenshot.

The calculation for the width of an element is: width + left padding + right padding + left border + right border + left margin + right margin = total width

History

Almost no HTML elements had support for both border and padding before the introduction of HTML 4 and CSS, but it was not too difficult to define the width and height of an element. However, it changed based on the element. The width of a table, including its border, was specified by the HTML width property. On the other hand, the width of an image was specified by its HTML width property inside any border. The table cell was the only element that supported padding at that time. The proposed width for the content of a cell in pixels, excluding cell padding, was defined as 'the suggested width for a cell content in pixels excluding the cell padding'.

In 1996, CSS introduced margin, border, and padding for a lot more elements. A definition of width was adopted in regard to content, border, margin, and padding in a similar way to a table cell. Since then, this has been known as the W3C box model.