Understanding the CSS Box Model

Every element in web design is a box. Here are the 4 layers you must know:

• Content: The text or image itself.
• Padding: Space inside the border, around the content.
• Border: The line around the padding.
• Margin: The space outside the border, pushing other elements away.

Tip: Always use box-sizing: border-box; to make sizing easier.