Margin and Padding

Margins and padding are two of the most important tools in CSS. They control the space around and inside your elements. When you understand them, you’ll be able to make your pages look clean and professional instead of cramped.

The Box Model

Every element in HTML is like a box. That box is made up of four parts:

• Content = your text, image, or whatever is inside the element

• Padding = space between the content and the border

• Border = the edge of the element

• Margin = space outside the border, pushing other elements away