What is the difference between margin and padding?

In web development, both margin and padding are CSS properties used to control the spacing and positioning of elements, but they work in different ways:

1. Margin: Margin is the space outside the border of an element. It creates the gap between the element and neighboring elements. Margins can push elements away from each other, increasing the space between them. You can set different margin values for each side of an element (top, right, bottom, left) using shorthand or individual properties.

For example:
```css
.box {
margin: 10px; /* sets margin for all sides */
margin-top: 20px; /* sets margin only for the top side */
}
```

2. Padding: Padding is the space between the content of an element and its border. It defines the inner space within the element. Padding does not affect the positioning of neighboring elements. Like margins, padding can also be set for each side of an element individually or using shorthand.

For example:
```css
.box {
padding: 10px; /* sets padding for all sides */
padding-right: 20px;/* sets padding only for the right side */
}
```

To visualize the difference, imagine a box representing an element. The content of the box is the actual content of the element, and the border surrounds it. Margin is the space outside the border, and padding is the space between the content and the border.

Here's a simple illustration:
```
┌───────────────────┐ ← Margin
│ ┌───────────┐ │
│ │ Padding │ │
│ │ Content │ │
│ └───────────┘ │
│ ┌───────────┐ │
│ │ Border │ │
│ └───────────┘ │
└───────────────────┘
```

In summary, margin controls the spacing between elements, while padding controls the spacing between the content and the border of an element.