Open In App

How is border-box different from content-box ?

Improve
Improve
Like Article
Like
Save
Share
Report

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

In this article, we will learn how border-box is different from content-box.

prerequisite :- Must Know CSS BOX MODEL

border-box and content-box are the two different values of box-sizing

  • content-box: This is the 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: 

<html>
    <head>
        <style>
            .box {
                    width: 300px;
                    height: 200px;
                    padding: 15px;
                    border: 10px solid black;
                    box-sizing: content-box;
                    background: red;
                    display: inline-block;
                } 
        </style>
    </head>
    <body>
        <h1 class="box">GeeksForGeeks</h1>
    </body>
</html>

BOX

CSS BOX MODEL

Note :- border-box = size of content + padding + border

In the above scenario,

width = width of content

border-box width = width of content + left padding + right padding + left border + right border

Syntax: 

box-sizing: content-box;
  • border-box: In this value, not only width and height properties are included but you will find padding and border inside of the box for example .box {width: 200px; border: 10px solid black;} renders a box that is 200px wide.

Example:

<html>
<head>
 <style>
  .box {
    width: 200px;
          height: 200px;
          padding: 15px;
          border: 10px solid green;
          box-sizing: border-box;
          background: red;
          display: inline-block;
         } 
 </style>
</head>
<body>
 <h1 class="box">Heading 1</h1>
</body>
</html>

BOX

CSS BOX MODEL

Calculation of dimension

width = border + padding + width of the content,

height = border + padding + height of the content.

Syntax:

box-sizing: border-box;

Note :- when using box-sizing : content-box; the content size remain same while border-box size grows as padding and border grow. but when using box-sizing: border-box; , the size of border-box remains same while size of content decreases as padding and border grow.

Example: In the below example, we will see the difference between the width when content-box and border-box properties are applied.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge"/>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0"/>
    <title>GeeksForGeeks</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            width: 200px;
            height: 200px;
            padding: 15px;
            border: 10px solid black;
            background: green;
            display: inline-block;
        }
        .content-box {
            box-sizing: content-box;
        }
        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <div class="content-box">
        <h3>Content Box</h3>
    </div>
    <div class="border-box">
        <h3>Border Box</h3>
    </div>
</body>
</html>


Output:

content box and border box



Last Updated : 16 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads