Box Sizing Property

Box-Sizing: content-box

Content box is default value of box sizing. The dimension of element only includes 'height' and 'width' and does not include 'border' and 'padding' given to element. Padding and Border take space outside the element

Example: content-box without padding

        .content-box{
            margin-bottom: 10px;
            height: 300px;
            width: 50%;
            border: 2px solid black;
        }
        .inside-div-without-padding{
            box-sizing: content-box;
            width: 100%;
            background-color: orange;
            text-align: center;
            border: 2px solid black;
        }

Parent Div

Child Div

Example: content-box with padding

        .content-box{
            margin-bottom: 10px;
            height: 300px;
            width: 50%;
            border: 2px solid black;
        }
        .inside-div{
            box-sizing: content-box;
            width: 100%;
            background-color: orange;
            text-align: center;
            border: 2px solid black;
            padding: 10px;
        }

Parent Div

Child Div

Box-Sizing: border-box

In border-box tells, padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added.

Example: border-box without padding

        .border-box{
            height: 300px;
            width: 50%;
            border: 2px solid black;
        }
        
        .bb-without-padding{
            box-sizing: border-box;
            width: 100%;
            background-color: orange;
            text-align: center;
            border: 2px solid black;
        }

Child

Example: border-box with padding

        .border-box{
            height: 300px;
            width: 50%;
            border: 2px solid black;
        }
        .bb-with-padding{
            box-sizing: border-box;
            width: 100%;
            background-color: orange;
            text-align: center;
            border: 2px solid black;
            padding: 10px;
        }

Child