Contenido del Curso
Tailwind CSS: Styling for Modern Web Development
Tailwind CSS: Styling for Modern Web Development
Spacing Utilities
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
index
index
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
index
index
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
index
index
¡Gracias por tus comentarios!