Adding Space to Elements

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.

We have multiple ways to give a value to padding.

Shorthand

Each Padding Separately

margin property

margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.

We can give margin in a couple of ways.

Shorthand

Each Margin Separately

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.

Shorthand

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:

Each Border Separately.