Using Spacing Utilities for Margin and Padding

You're doing a fantastic job!

Proper spacing is crucial for creating visually appealing and well-structured layouts. Previously, we used margin and padding utility classes, but let's delve into them in more detail.

Margin

Margin utilities in Tailwind CSS allow you to control the spacing around elements. They can be applied using the m- prefix, followed by a size value. You can apply margins to all sides, or specific sides (top, right, bottom, left) using the respective prefixes (mt-, mr-, mb-, ml-).

Examples

Margin Class	Description
`m-4`	Applies a margin of 1rem (16px) to all sides.
`mt-2`	Applies a margin of 0.5rem (8px) to the top side.
`mr-6`	Applies a margin of 1.5rem (24px) to the right side.
`mb-1`	Applies a margin of 0.25rem (4px) to the bottom side.
`ml-3`	Applies a margin of 0.75rem (12px) to the left side.

index.html

<!DOCTYPE html>

<head>

<title>Spacing Utilities - Example 1</title>

</head>

<body>

<div class="m-4 bg-red-300">Margin on all sides</div>

<div class="mt-2 mb-4 bg-red-200">Top and bottom margin</div>

<div class="mr-6 ml-2 bg-red-100">Right and left margin</div>

</body>

</html>

Padding

Padding utilities in Tailwind CSS are similar to the margin utility classes, and the logic remains the same.

They can be applied using the p- prefix, followed by a size value. You can apply padding to all sides, or specific sides (top, right, bottom, left) using the respective prefixes (pt-, pr-, pb-, pl-).

Examples

Padding Class	Description
`p-4`	Applies a padding of 1rem (16px) to all sides.
`pt-2`	Applies a padding of 0.5rem (8px) to the top side.
`pr-6`	Applies a padding of 1.5rem (24px) to the right side.
`pb-1`	Applies a padding of 0.25rem (4px) to the bottom side.
`pl-3`	Applies a padding of 0.75rem (12px) to the left side.

index.html

<!DOCTYPE html>

<head>

<title>Spacing Utilities - Example 2</title>

</head>

<body>

<div class="p-4 bg-green-300 m-2">Padding on all sides</div>

<div class="pt-2 pb-4 bg-green-200 m-2">Top and bottom padding</div>

<div class="pr-6 pl-2 bg-green-100 m-2">Right and left padding</div>

</body>

</html>

Horizontal and Vertical Spacing

Additionally, we can apply margins/paddings to the horizontal (_x-) or vertical (_y-) axis.

Examples

Class	Description
`mx-4`	Applies a margin of 1rem (16px) to the left and right sides.
`my-4`	Applies a margin of 1rem (16px) to the top and bottom sides.
`px-4`	Applies a padding of 1rem (16px) to the left and right sides.
`py-4`	Applies a padding of 1rem (16px) to the top and bottom sides.

index.html

<!DOCTYPE html>

<head>

<title>Spacing Utilities - Example 3</title>

</head>

<body>

<div class="mx-4 bg-slate-500 text-white">Horizontal margin</div>

<div class="my-4 bg-slate-600 text-white">Vertical margin</div>

<div class="px-4 bg-slate-700 text-white">Horizontal padding</div>

<div class="py-4 bg-slate-800 text-white">Vertical padding</div>

</body>

</html>

Note

If you are interested in inspecting more around spacing, please follow the links:

Padding;

Margin.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1

Using Spacing Utilities for Margin and Padding

Margin

Examples

Padding

Examples

Horizontal and Vertical Spacing

Examples

1. Which class applies a margin of 1rem (16px) to all sides of an element?

2. How do you apply a padding of 0.5rem (8px) to the top side of an element?

3. What are the Tailwind CSS classes for applying a margin of 2rem (32px) to an element's top and bottom sides?