CSS Box Model

The CSS box model is a fundamental concept that defines how the element's dimensions and spacing are calculated.

The box model treats every HTML element as a rectangular box consisting of content, padding, border, and margin.

The box model defines the layout of an HTML element in the following way:

CSS Box Model Layout

The components of the box model are:

  • content: actual text or image that is displayed in the element
  • padding: transparent space between the content and the border of an element
  • border: line that surrounds the padding and content within the element
  • margin: transparent area added outside the border

The primary purpose of the box model is to explain how the dimensions and spacing of elements are calculated and how they relate to each other.


Width and Height of an Element with Box Model

The box model is important for understanding how the width and height of an element are calculated.

The width and height of the element are applied only to the content of the element by default. Hence, the actual size of the element is calculated by adding the padding and border along with the specified width and height of the element.

Actual width: border-left + padding-left + width + padding-right + border-right

Actual height: border-top + padding-top + height + padding-bottom + border-bottom

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Box Model</title>
    </head>

    <body>
        <div>
            The CSS box model is a way of describing the layout of an HTML
            element.
        </div>
    </body>

</html>
div {
    width: 400px;
    height: 80px;
    border: 10px solid black;
    padding: 15px;
    background-color: greenyellow;
    /* clips the background color to content only */
    background-clip: content-box;
}

Browser Output

CSS Box Model Example

In the above example, we have specified

div {
    width: 400px;
    height: 80px;
    border: 10px solid black;
    padding: 15px;
}

The width and height of the div are applied only to the content of the element. The actual width and height of the element are:

width = 10px + 15px + 400px + 15px + 10px = 450px
height = 10px + 15px + 80px + 15px + 10px = 130px

Hence, the actual width becomes 450px, and the height becomes 130px.

Note: The margin is not added to calculate the actual size of the box, even though it affects the total space the box takes on the page. The border marks the boundary of the box area, and it does not extend into the margin.


Box Model With Inline Elements

The box model is applied differently to inline elements. This is because inline elements don't have a default width or height and occupy space based on the size of their content.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Box Model</title>
    </head>

    <body>
        <p>
            The box model works differently for inline elements. For example,
            this <span>span</span> element does not work as expected.
        </p>
    </body>

</html>
p {
    width: 350px;
    border: 1px solid black;
}

span {
    width: 100px;
    height: 40px;
    border: 5px solid black;
    padding: 10px;
    margin: 10px;
    background-color: greenyellow;
}

Browser Output

CSS Box Model Inline Example

In the above example,

  • The height and width are ignored.
  • The top and bottom margins are also ignored, and only the left and right margins work.
  • The padding works for all four sides of the elements.

Hence, we cannot calculate the actual dimensions of the inline element.

In order to apply the box model in the inline elements, the display property should be changed to either inline-block or block.

Let's see an example with inline-block,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Box Model</title>
    </head>

    <body>
        <p>
            The box model works differently for inline elements. For example,
            this <span>span</span> element does not work as expected.
        </p>
    </body>

</html>
p {
    width: 350px;
    border: 1px solid black;
}

span {
    display: inline-block;
    width: 100px;
    height: 40px;
    border: 5px solid black;
    padding: 10px;
    margin: 10px;
    background-color: greenyellow;
}

Browser Output

CSS Box Model Inline Example

In the above example, the box model works as expected. The actual width and height of the span element are calculated as:

width = 5px + 10px + 100px + 10px + 5px = 130px
height = 5px + 10px + 40px + 10px + 5px = 70px

Hence, the actual width and height become 130px and 70px respectively.

Note: The default behavior of the box model can be changed by the box-sizing property allowing developers to set the width and height intuitively.

You can learn more about the box-sizing property.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges