CSS Box Model

CSS Box Model

In CSS, all elements are represented as rectangular boxes in the browser. The width and height specified for an element in CSS are not the final width and height occupied by the element on the web page. The actual dimensions include the collective size of padding, borders and margins along with the content area.

This is the CSS box model, where the final width of an element is calculated as follows:

Final width = content width + left padding + right Padding
              + left Border + right Border
              + left Margin + right Margin

The final height is calculated as follows:

Final height = content height + top padding + bottom Padding
               + top Border + bottom Border
               + top Margin + bottom Margin

In the above example,

Total width = 250px + 50px + 50px + 40px + 40px + 30px + 30px
            = 490px

Total height = 150px + 50px + 50px + 40px + 40px + 30px + 30px
            = 390px

To understand the importance of this concept, consider an example:

Let’s say a div element has a padding of 10px, and a margin of 5px on all sides and no borders. If you want this div to occupy a total width of 300px, you can calculate the exact width to specify using this formula:

Width to specify = Total width - right padding - left padding
                   - right border - left border
                   - right margin - left margin

                 = 300px - 10px - 10px
                   - 0px - 0px
                   - 5px - 5px

                 = 270px