--- title: "What do Box-sizing in CSS?" description: "What do Box-sizing in CSS?" author: "Ethan Karla" published: 2021-07-15 canonical: https://answers.mindstick.com/qa/93713/what-do-box-sizing-in-css category: "programming" tags: ["css", "css cascading style sheets"] reading_time: 3 minutes --- # What do Box-sizing in CSS? What is the use of box-sizing and how many types of box-sizing are available? ## Answers ### Answer by Shivam Prajapati The CSS box-sizing property is used to form the rules that how the element will capture the height and width. Let's understand this with a scenario : If you create a div with some height, width, padding and border then that div will capture the size of the window like this- width + padding + border = actual visible width of an element's box height + padding + border = actual visible height of an element's box This means that your div will occupy a width and height greater than its actual width and height To overcome this problem the boxSizing property is defined.After applying 'box-sizing:border-box' the given width will be as it is without any change. The syntax of the box-sizing property is as follows: 1.) content-box: the default. Width and height values apply to the element’s content only. The padding and border are added to the outside of the box. 2.) padding-box: The width and height values ​​are applied to the element's content and its padding. The border is attached to the outside of the box. Currently, only Firefox supports the padding-box value. 3.) border-box: Width and height values apply to the content, padding, and border. 4.) inherit: Inherits the box sizing of the parent element. Let's understand with the help of an example : ```         Mindstick Software Private Limited        

Box-sizing property

   
        I am the first div with no box-sizing property.    
   
   
        I am the second div with box-sizing property.    
``` Hope this will clear your confusion. Happy Coding! \ --- Original Source: https://answers.mindstick.com/qa/93713/what-do-box-sizing-in-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.