# CSS Box Model

### Overview

Box models are the core concept of CSS. We can define box models,

* Rectangular Box
    
* Generated for the elements
    
* Reside in the document tree
    

Each of the CSS models has a content area along with the possible optional surroundings,

* Padding
    
* Border
    
* Margin
    

> Now regarding margin, it is not included with the actual size of the box. Instead it grows outside the box. Only the padding and border are included with the box size

### Rules

The rules for the box-sizing,

* Box models are calculated by width, height, padding, and border
    
* If no height is defined, it will take the height same as the content
    
* If no width or max width is defined, it will take the width of the parent. A few exceptions are input, table, figure, span, etc.
    
* The default value of the `box-sizing` is `content-box`. For the value `content-border`, the size of the box includes the padding and border.
    

> Rules are not applicable for the float component.

In conclusion, understanding the CSS box model is essential for precise layout control. By mastering properties like `box-sizing`, padding, border, and margin, you can effectively manage the size and spacing of elements on a webpage.