Mastering the Fundamentals of Margin and Padding

Margin

Margin is the space around an element’s border.

Space outside an element is controlled by a margin.

Margin can be represented in 5 ways:

1. margin
2. margin-top
3. margin-right
4. margin-bottom
5. margin-left

1. margin:

margin property has 4 properties.

In other words, the margin is the shorthand property for the other 4 properties.

First, the margin-top

Second, margin-right

Third, margin-bottom

At last, margin-left.

Here, 55px is for margin-top,10px for margin-right,15px for margin-bottom, and 30px for margin-left.

If the margin property has three values:

• margin: 100px 50px 10px;

the top margin is 100px,right and left margins are 50px,bottom margin is 10px.

If the margin property has two values:

• margin: 50px 10px;

top and bottom margins are 50px, and right and left margins are 10px.

If the margin property has one value:

• margin: 25px;

all four margins are 25px

2. margin-top:

It only applies the margin to the top.

3. margin-right:

It only applies the margin to the right.

4. margin-bottom:

It only applies the margin to the bottom.

5. margin-left:

It only applies the margin to the left.

Padding

Padding is the space between an element’s border and the element’s content.

Space inside an element is controlled by padding.

It has similar representations as in margin property.

p {
  padding: 300px;
}

1. padding:

padding property has 4 properties.

In other words, the padding is the shorthand property for the other 4 properties.

First, the padding-top

Second, padding-right

Third, padding-bottom

At last, padding-left.

If the padding property has three values:

• padding:10px 5px 15px;

top padding is 10px,right and left padding is 5px,bottom padding is 15px

If the padding property has two values:

• padding:10px 5px;

top and bottom padding are 10px,right and left padding is 5px

If the padding property has one value:

• padding:70px;

all four paddings are 70px.

2. padding-top:

It only applies the padding to the top.

p {
      padding-top: 155px;
   }

3. padding-right:

It only applies the padding to the right.

p {
    padding-right: 155px;
   }

3. padding-bottom:

It only applies the padding to the bottom.

4. padding-left:

It only applies the padding to the left.