01. Box Model

⬅️ CSS

🔗 from here

Everything displayed by CSS is a box.

• Extrinsic sizing vs intrinsic sizing: extrinsic is when you define it, intrinsic is when the content does (e.g. min-content). So you are avoiding overflows with intrinsic sizing? 🤔

• When you switch to intrinsic sizing, you are letting the browser make decisions for you, based on the box’s content size.

• Huh, the scrollbars occupy the padding space

• outline and box-shadow come inside the margin space

• the default box-sizing value is content-box (meaning padding and border values are added on top of the width)

Resetting:

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