The `margin`, `padding`, and `border` properties help us add more space to elements, improving the web resource's appearance, readability, and usability. Let's take a closer look at each of them.

## padding property
`padding` refers to the space between an element's content and its border. 
```css
padding: top right bottom left
```


We have multiple ways to give a value to padding. 
### Shorthand
```css
/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
```


### Each Padding Separately
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## margin property
`margin` refers to the space between an element and the adjacent elements. It is the area outside the element's border.
```css
margin: top right bottom left
```


We can give `margin` in a couple of ways. 
### Shorthand
```css
/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
```

### Each Margin Separately
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## border property
`border` refers to the line that surrounds an element's padding and content. It is the area that separates the element's content from its margin.
```css
border: width style color;
```

### Shorthand
```css
border: 4px solid brown;
```
It means that the border of all sides will look the same. Their `width` is `4px`, `style` is `solid`, and `color` is `brown`.  

Let's consider the following example and figure out the possible border styles:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveC1vbmUiPnNvbGlkPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3gtdHdvIj5kb3R0ZWQ8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveC10aHJlZSI+ZGFzaGVkPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3gtZm91ciI+ZG91YmxlPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LmJveC1vbmUgewogIGJvcmRlcjogMnB4IHNvbGlkIGJyb3duOwp9Ci5ib3gtdHdvIHsKICBib3JkZXI6IDJweCBkb3R0ZWQgYnJvd247Cn0KLmJveC10aHJlZSB7CiAgYm9yZGVyOiAycHggZGFzaGVkIGJyb3duOwp9Ci5ib3gtZm91ciB7CiAgYm9yZGVyOiAycHggZG91YmxlIGJyb3duOwp9CgovKiBUaGlzIHBhcnQgaXMgbm90IHRoZSBmb2N1cyBvZiB0aGUgY3VycmVudCBjaGFwdGVyLiAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9CgpkaXYgewogIHdpZHRoOiAxMjBweDsKICBoZWlnaHQ6IDEyMHB4OwogIG1hcmdpbjogNXB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

### Each Border Separately.
```css
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
```

What is the difference between `margin` and `padding` in CSS?

What is the purpose of the `border` property?

How can we apply different `margin` values to different sides of an element?

Introduction to CSS (Cascading Style Sheets), which is a styling language used to enhance the look and feel of web pages. We will cover how to deal with fonts, element positioning, colors, and other decorative effects.

Basic CSS concepts and rules to add styles to the web page.

Set of CSS properties that are used to style the text content of HTML elements.

Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.

Method of arranging the set of elements in rows and columns.

Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.

CSS Fundamentals

Adding Space to Elements

padding property

Shorthand

Each Padding Separately

margin property

Shorthand

Each Margin Separately

border property

Shorthand

Each Border Separately.

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?

CSS Fundamentals

Adding Space to Elements

padding property

Shorthand

Each Padding Separately

margin property

Shorthand

Each Margin Separately

border property

Shorthand

Each Border Separately.

1. What is the difference between margin and padding in CSS?

2. What is the purpose of the border property?

3. How can we apply different margin values to different sides of an element?

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?