Utilitas Padding

Padding is the space between an element's content and its border. It is part of the CSS box model: every element has content, padding, border, and margin layers. Padding adds breathing room inside an element — a button with no padding has its text touching the edges, while py-2 px-4 creates comfortable vertical and horizontal cushioning around the label.

The p-* utility applies equal padding to all four sides of an element at once. p-4 sets 16px on top, right, bottom, and left. This is the most common starting point for cards, modals, and section containers. Use p-0 to explicitly remove all padding when an inherited or default style adds unwanted spacing.

Control padding on horizontal and vertical axes independently. px-* adds padding to left and right (padding-left and padding-right in CSS). py-* adds padding to top and bottom. This is essential for buttons, navigation items, and pill badges where you want more horizontal padding than vertical padding, or for sections where top/bottom padding differs from left/right padding.

For precise control, apply padding to individual sides. pt-* is padding-top, pr-* is padding-right, pb-* is padding-bottom, and pl-* is padding-left. Mix and match to create asymmetric padding. A common case is adding extra top padding to a section that needs clearance below a sticky navbar: pt-20 (80px) accounts for a 64px navbar plus extra breathing room.

You can combine axis and side utilities. Start with px-6 py-4 for general padding, then override a specific side. For example, a list item with a left icon might use px-4 py-3 pl-12 — the pl-12 overrides the left padding from px-4, creating extra room for the icon without affecting the right padding.

A key distinction: padding is inside the element (affects the clickable/tapable area and background color extent), while margin is outside (creates space between elements). For clickable elements like buttons and links, always use padding — it expands the hit area and the colored background region. Use margin to separate one component from another.

Form inputs require careful padding to be both readable and visually balanced. Text inputs typically use px-3 py-2 or px-4 py-2.5 for a comfortable text field. Larger inputs for rich text or search bars might use px-4 py-3. Always pair input padding with a rounded utility and a border to visually delineate the input field.

Section padding commonly increases at larger viewports. Use responsive prefixes to create this scaling effect. A container might have px-4 py-8 on mobile, md:px-8 md:py-16 on tablets, and lg:px-16 lg:py-24 on desktop. This progressive increase in whitespace is a key characteristic of professional, spacious desktop layouts.

When using flex or grid layouts, you generally do not pad the container but instead use gap-* between children. However, padding the container itself creates consistent inner margins from the container edges. The combination of p-6 on a grid container with gap-4 between items gives a visually balanced layout with equal-feeling spacing throughout.

Navigation items need padding that creates a comfortable tap target (minimum 44px height per Apple's guidelines) while keeping the nav visually compact. A nav link with py-2 px-4 gives 8px vertical and 16px horizontal padding. The link's visible area with text plus padding typically meets the tap target requirement. Add hover:bg-gray-100 rounded-lg for visual feedback.

For right-to-left (RTL) language support, Tailwind v3.3 added logical property utilities: ps-* (padding-inline-start) and pe-* (padding-inline-end). In LTR, ps-4 equals pl-4. In RTL, ps-4 automatically becomes pr-4. Use ps-* and pe-* instead of pl-* and pr-* when building globally accessible applications.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: p-* applies uniform padding on all four sides, px-* and py-* control horizontal and vertical axes independently, and pt-*, pr-*, pb-*, pl-* target individual sides for asymmetric padding. Next up we apply margin utilities and learn how auto margins enable horizontal centering.