Padding

In this lesson, we will explore the padding CSS utility classes provided by Tailwind, which allow us to easily manage and customize the padding of elements in our web design.
Tailwind CSS uses utility classes to apply styling, and this includes a comprehensive system for padding. Each class is self-descriptive, making it easy to understand and apply. Let's break down the padding classes:
  • p-{number}: Applies uniform padding to all sides. Example: p-5 applies the same padding (20px) on top, right, bottom, and left sides.

    Each {number} in the class name refers to a spacing scale defined by Tailwind CSS, which is usually in increments of 0.25rem (4px). So, p-4 would typically mean padding: 1rem (which equals 16px if the root font size is 16px).
p-5.png

  • py-{number}: Applies padding to the top and bottom sides (Y-axis). Example: py-5 applies padding to both top and bottom sides.
  • px-{number}: Applies padding to the left and right sides (X-axis). Example: px-10 applies padding (40px) to both left and right sides.
padding-x-y.png
  • pt-{number}: Applies padding to the top. Example: pt-4 applies padding to the top side.
  • pr-{number}: Applies padding to the right side. Example: pr-4 applies padding to the right side.
  • pb-{number}: Applies padding to the bottom. Example: pb-4 applies padding to the bottom side.
  • pl-{number}: Applies padding to the left side. Example: pl-4 applies padding to the left side.
individual-padding.png
p-px: Applies a padding of 1 pixel on all sides.
px-px: Applies a padding of 1 pixel on the left and right sides.
py-px: Applies a padding of 1 pixel on the top and bottom sides.

For Inline Elements

  • ps-{number}: Applies padding at the start of an inline element.
  • pe-{number}: Applies padding at the end of an inline element.
  • ps-px: Applies a padding of 1 pixel at the start of an inline element.
  • pe-px: Applies a padding of 1 pixel at the end of an inline element.
These classes provide a quick and consistent way to apply padding across your application, adhering to the design system set by Tailwind CSS.

Block vs Inline Elements

To understand the difference between block and inline elements, the following distinctions will help clarify it:

Block Elements

Block elements always start on a new line. They take up the full width available (stretches out to the left and right as far as it can).
You can set width and height values. By default, block elements do not allow other HTML elements to sit next to them.
Common Examples:
<div>, <h1> through <h6>, <p>, <form>, <header>, <footer>, <section>.

Inline Elements

Inline elements do not start on a new line. They only take up as much width as necessary (not the full width of the page). Setting width and height values has no effect.
Inline elements allow other elements to sit next to them on the same line.
Common Examples:
<span>, <a>, <img>, <strong>, <em>, <b>, <i>.
Usage:

Inline-Block Elements

There's also a third category, called inline-block, which is a mix of both.
Inline-block elements are placed inline (on the same line as adjacent content), but they behave as block elements in terms of being able to set width and height.

Key Differences

  • Line Breaks: Block elements inherently create a line break before and after the element. Inline elements do not.
  • Width and Height: You can set width and height on block elements, but not on inline elements.
  • Layout: Block elements are typically used for layout and structure on the page, while inline elements are used within the text or to wrap other inline elements.
  • Understanding these differences is crucial for proper HTML structuring and CSS styling, allowing you to create more organized and visually appealing web pages.
Here is the list of possible padding values ({number}) for Tailwind CSS classes, including their corresponding rem values:
  • 0.5 - 0.125rem. e.g. 'p-0.5' : represents padding of 0.125rem
  • 1 - 0.25rem
  • 1.5 - 0.375rem
  • 2 - 0.5rem
  • 2.5 - 0.625rem
  • 3 - 0.75rem
  • 3.5 - 0.875rem
  • 4 - 1rem
  • 5 - 1.25rem
  • 6 - 1.5rem
  • 7 - 1.75rem
  • 8 - 2rem
  • 9 - 2.25rem
  • 10 - 2.5rem
  • 11 - 2.75rem
  • 12 - 3rem
  • 14 - 3.5rem
  • 16 - 4rem
  • 20 - 5rem
  • 24 - 6rem
  • 28 - 7rem
  • 32 - 8rem
  • 36 - 9rem
  • 40 - 10rem
  • 44 - 11rem
  • 48 - 12rem
  • 52 - 13rem
  • 56 - 14rem
  • 60 - 15rem
  • 64 - 16rem
  • 72 - 18rem
  • 80 - 20rem
  • 96 - 24rem
Next lesson - Margin
In this lesson, we will delve into the Margin CSS utility classes offered by Tailwind. These classes enable us to effectively control and customize the margins around elements in our web design, offering precise control over spacing and layout.