CSS Box Sizing - Detailed Overview

Introduction to CSS Box Sizing

The box-sizing property controls how the width and height of an element are calculated. It can be set to either content-box or border-box. By default, elements use content-box, which means the width and height apply only to the content itself. When set to border-box, the width and height include padding and border, making it easier to manage layout and design.

Example 1: Content Box

Content Box

HTML Code:


<div class="box">Content Box</div>

CSS Code:


/* Content Box */
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid #333;
    box-sizing: content-box;
    background-color: lightcoral;
}

This box uses box-sizing: content-box;, so the width and height only include the content area. Padding and borders are added outside this area, which can result in a larger overall size than specified.

Example 2: Border Box

Border Box

HTML Code:


<div class="box box-border">Border Box</div>

CSS Code:


/* Border Box */
.box-border {
    box-sizing: border-box;
    background-color: lightseagreen;
}

This box uses box-sizing: border-box;, so the width and height include padding and borders. This makes it easier to manage the overall size of the element, as padding and borders do not increase the box's total width and height.