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.

padding: top right bottom left

We have multiple ways to give a value to padding.

Shorthand

99
1
2
3
4
5
6
7
8
9
10
11
/* 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

9
1
2
3
4
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.

margin: top right bottom left

We can give margin in a couple of ways.

Shorthand

99
1
2
3
4
5
6
7
8
9
10
11
/* 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

9
1
2
3
4
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.

border: width style color;

Shorthand

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:

Each Border Separately.

9
1
2
3
4
5
6
/* 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;