Skip to content
Related Articles

Related Articles

How is border-box different from content-box ?

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jun, 2022

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.

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

  • border-box: In this value, height and width properties are included but padding, border, or margin were not included.

 Example: 

.box {width: 350px; border: 10px solid black;} 

It renders a box that is 370px wide.

Calculation of dimension = 

   width = width of the content, and height = height of the content

(Borders and padding are not included in the calculation)

Syntax: 

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

Calculation of dimension

 =  width = border + padding + width of the content, and height = border + padding + height of the content.

Syntax:

box-sizing: content-box;

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>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1">
    <title>GeeksforGeeks</title>
      
    <style>
        div {
          width: 160px;
          height: 80px;
          padding: 20px;
          border: 2px solid black;
          background: lightgreen;          
        }
  
        .content-box {
          box-sizing: content-box;
        }
        .border-box {
          box-sizing: border-box;
        }
    </style>
</head>
  
<body>
<center>
    <h1 style="color:green">GeeksforGeeks</h1>
  
    <div class="content-box">Content box</div>
    <br>
    <div class="border-box">Border box</div>
</center>
</body>
</html>

Output:

content-box adn border-box


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!