Padding and Margin Properties

In the Zombie Width and Height lesson, we learned the size property of inline and block layouts. In this lesson, let’s have a look at padding and margin properties.

Padding direction agnostic zombies

• padding-inline-start: The size of the padding at the start of the inline direction

  (This is the writing-direction-agnostic version of padding-left.)

• padding-inline-end: The size of the padding at the end of the inline direction

  (This is the writing-direction-agnostic version of padding-right.)

• padding-block-start: The size of the padding at the start of the block direction

  (This is the writing-direction-agnostic version of padding-top.)

• padding-block-end: The size of the padding at the end of the block direction

  (This is the writing-direction-agnostic version of padding-bottom.)

.padding-direction-agnostic-zombies {
    padding-inline-start: 1em;
    padding-inline-end: 1em;
    padding-block-start: 0.5em;
    padding-block-end: 0.5em;
}

Experiments to try:

1. What happens if you remove the box-sizing property?