Search⌘ K
AI Features
Home
Courses
Modern CSS Layout: Decking Zombies with Style

Padding and Margin Properties

Explore the padding and margin properties in CSS to build flexible, direction-agnostic layouts. Understand how padding-inline-start, padding-block-end, margin-inline-end, and margin-block-start adjust spacing responsively. Gain practical skills for managing layout spacing without relying on fixed directions, improving your web design's adaptability and responsiveness.

We'll cover the following...

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?

Marginal direction agnostic zombies

  • margin-inline-start: The size of the margin at the start of the inline direction (The writing-direction-agnostic version of margin-left)
  • margin-inline-end: The size of the margin at the end of the inline direction (The writing-direction-agnostic version of margin-right)
  • margin-block-start: The size of the at the start of the block direction (The writing-direction-agnostic version of margin-top)
  • margin-block-end: The size of the margin at the end of the block direction (The writing-direction-agnostic version of margin-bottom)
.margin-direction-agnostic-zombies {
    margin-inline-start: 2em;
    margin-inline-end: 2em;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

Experiments to try:

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