CSS Box Sizing

📌The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

💎Without the CSS box-sizing Property

✅ By default, the width and height of an element is calculated like this:

💎width + padding + border = actual width of an element

💎 height + padding + border = actual height of an element

🔑The box-sizing property allows us to include the padding and border in an element's total width and height.

🔑If you set 
box-sizing: border-box; 
on an element, padding and border are included in the width and height:

@html_css_tut
"w3schools .com"

📌box-sizing: border-box

📎The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).

🔑Applying this to all elements is safe and wise:

________________

* {
  box-sizing: border-box;
}
_________________

@html_css_tut
"w3schools .com"