The Most Important CSS Property

If you don't understand box-sizing, your layouts will always be " crooked " .

1. content-box (Default Standard)

If you write width: 100px, padding: 20px and border: 5px, the real block width on screen will be: 100 + 20(left) + 20(right) + 5(left) + 5(right) = 150px. This is terribly inconvenient!

2. border-box (Salvation)

Browser understands that 100px is the FINAL size.

• If you add padding 20px, browser simply compresses content to 60px inside so total size remains 100px.

*, *::before, *::after {
  box-sizing: border-box;
}

Why 100% + 1px = Scroll?

Without border-box, if you set width: 100% to a block and add even border: 1px, it will become 100% + 2px wide. This will instantly cause horizontal scroll on the site.