Box Sizing

Part of the Styling with CSS section of Coddy's HTML journey — lesson 39 of 76.

In CSS, box-sizing is a property that determines how the total width and height of an element are calculated. By default, the width and height properties only include the content's size and do not account for padding, borders, or margins. However, by using the box-sizing property, you can change this behavior and make the width and height properties include the padding and border sizes as well.

This can simplify layout calculations and prevent unexpected sizing issues.

Here's the basic syntax for using the box-sizing property:

selector {
    box-sizing: value;
}

value: The desired box-sizing behavior, which can be one of the following:

content-box: This is the default value. The width and height properties only include the content's size. Padding, borders, and margins are added outside of the specified width and height.

border-box: The width and height properties include the content, padding, and border sizes. Margins are still added outside of the element.

For example:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

In this example, the <div> element has a box-sizing value of content-box. This means that the actual rendered width of the <div> will be 300px (content) + 40px (left and right padding) + 10px (left and right border) = 350px. The height will be calculated similarly.

On the other hand, the element with the class container has a box-sizing value of border-box. In this case, the specified width of 400px will include the content, padding, and border. The actual content area will shrink to accommodate the padding and border, resulting in a content width of 400px - 60px (left and right padding) - 20px (left and right border) = 320px. The height will be calculated similarly.

Challenge

Easy

You are given an HTML document with two divisions (<div>), each with a different class. Your task is to use the box-sizing property to control how the width and height of these elements are calculated. Follow the steps below:

Write a CSS rule that targets the <div> element with the class <strong>content-box-div</strong>. Set the width to 300px, the height to 200px, the padding to 20px, the border to 5px solid blue, and the box-sizing to content-box.
Write a CSS rule that targets the <div> element with the class <strong>border-box-div</strong>. Set the width to 300px, the height to 200px, the padding to 20px, the border to 5px solid red, and the box-sizing to border-box.

Cheat sheet

The box-sizing property determines how the total width and height of an element are calculated:

selector {
    box-sizing: value;
}

Values:

content-box (default): Width and height only include content size. Padding and borders are added outside.
border-box: Width and height include content, padding, and border sizes. Margins are still added outside.

/* content-box example */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Total width: 300px + 40px + 10px = 350px */
}

/* border-box example */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Total width: 400px (content shrinks to fit) */
}

Try it yourself

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>