Understanding the Box Model

CSS is hard! What will help you with CSS is understanding the Box Model. You can think of the Box Model as a box that wraps around every HTML content.

The box consists of:

• Padding
• Border
• Margin

What helps me think about these components when I'm editing CSS is which of these belongs to the element and which are "outside" of the element.

The Padding belongs to the element. If I need more spacing between the content and the edge of the element, I will add more Padding.

The Border is at the edge of the element. I will add a border if we need an outline on the edge.

The Margin will be outside the element. If we need spacing between the edge of the element and its' neighbor, I will add more Margin.

I hope this helps you understand more about the Box Model and simplify editing CSS.