CSS Box Sizing

• Purpose:
  • The box-sizing property in CSS controls how the total width and height of an element is calculated.
  • It determines whether the padding and border of an element are included within the specified width and height, or if they are added on top.

element {
   box-sizing: value;
}

• element: The HTML element you want to style (e.g., div, p, span).
• value:  Can be one of two values:
  • content-box (default): The width and height only apply to the content of the element. Padding and border are added outside of the specified dimensions, increasing the total size.
  • border-box: The width and height include the padding and border of the element. The content area is adjusted to fit within the specified width and height.
• Example:

.my-element {
   width: 200px; 
   height: 100px; 
   border: 10px solid black; 
   padding: 20px; 
   box-sizing: border-box; 
}

In this example, even with the 10px border and 20px padding, the my-element will have a total width of 200px and a total height of 100px.