Tailwind CSS Box Model & Display: Spacing, Sizing, and Display

Q: What unit is Tailwind's spacing system based on?

Tailwind defaults to 4px as the base unit. p-1 = 4px, p-2 = 8px, p-4 = 16px, and so on. You can customize the spacing scale through configuration.

Q: Why does mx-auto achieve horizontal centering?

mx-auto sets the left and right margins to auto. When the element has a fixed width, the browser automatically calculates equal margins on both sides, achieving horizontal centering. The element must be block-level.

Q: What is the difference between w-full and w-screen ?

w-full = 100% of the parent element's width, w-screen = 100vw (viewport width). Viewport width is typically used for elements that need to span the entire screen.

Padding Spacing System

Padding controls the space between an element's content and its border. Tailwind provides a complete spacing system from p-0 to p-96, defaulting to multiples of 4px.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding Spacing System Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Directional padding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Directional Padding</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded text-center">
          <div class="bg-blue-500 text-white p-2 rounded">p-4</div>
          <span class="text-sm text-gray-600 mt-2 block">All sides equal</span>
        </div>
        <div class="bg-green-100 px-6 py-4 rounded text-center">
          <div class="bg-green-500 text-white p-2 rounded">px-6 py-4</div>
          <span class="text-sm text-gray-600 mt-2 block">Horizontal/Vertical</span>
        </div>
        <div class="bg-purple-100 pt-4 pb-2 px-4 rounded text-center">
          <div class="bg-purple-500 text-white p-2 rounded">pt-4 pb-2</div>
          <span class="text-sm text-gray-600 mt-2 block">Top/Bottom differ</span>
        </div>
        <div class="bg-orange-100 pl-8 pr-4 py-4 rounded text-center">
          <div class="bg-orange-500 text-white p-2 rounded">pl-8 pr-4</div>
          <span class="text-sm text-gray-600 mt-2 block">Left/Right differ</span>
        </div>
      </div>
    </div>

    <!-- Common padding values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Common Padding Values</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-1 w-32 text-center text-sm">p-1 (4px)</div>
          <div class="bg-gray-200 p-2 w-32 text-center text-sm">p-2 (8px)</div>
          <div class="bg-gray-200 p-3 w-32 text-center text-sm">p-3 (12px)</div>
          <div class="bg-gray-200 p-4 w-32 text-center text-sm">p-4 (16px)</div>
        </div>
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-5 w-32 text-center text-sm">p-5 (20px)</div>
          <div class="bg-gray-200 p-6 w-32 text-center text-sm">p-6 (24px)</div>
          <div class="bg-gray-200 p-8 w-32 text-center text-sm">p-8 (32px)</div>
          <div class="bg-gray-200 p-10 w-32 text-center text-sm">p-10 (40px)</div>
        </div>
      </div>
    </div>

    <!-- Arbitrary values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Arbitrary Value Padding</h3>
      <div class="flex gap-4">
        <div class="bg-blue-100 p-[15px] rounded text-center">p-[15px]</div>
        <div class="bg-green-100 p-[2rem] rounded text-center">p-[2rem]</div>
        <div class="bg-purple-100 p-[5%] rounded text-center">p-[5%]</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Padding direction class reference:

Class	CSS Property	Description
`p-4`	`padding: 16px`	All sides equal
`px-4`	`padding-left/right: 16px`	Horizontal
`py-4`	`padding-top/bottom: 16px`	Vertical
`pt-4`	`padding-top: 16px`	Top
`pr-4`	`padding-right: 16px`	Right
`pb-4`	`padding-bottom: 16px`	Bottom
`pl-4`	`padding-left: 16px`	Left

Traditional CSS vs Tailwind The traditional approach requires setting specific padding values for each element, while Tailwind uses a preset spacing system based on 4px multiples to maintain design consistency.

Margin Spacing System

Margin controls the space between an element and other elements. The syntax is similar to Padding, with additional support for auto-centering.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin Spacing System Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Margin</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 all sides equal</div>
        <div class="bg-green-500 text-white p-4 mx-8 my-4 rounded">mx-8 my-4</div>
        <div class="bg-purple-500 text-white p-4 mt-8 mb-2 ml-4 mr-6 rounded">
          mt-8 mb-2 ml-4 mr-6
        </div>
      </div>
    </div>

    <!-- Auto centering -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">mx-auto Centering</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 w-64 mx-auto rounded text-center">
          mx-auto centered
        </div>
      </div>
    </div>

    <!-- Negative margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Negative Margin</h3>
      <div class="bg-gray-200 p-8">
        <div class="bg-red-500 text-white p-4 -mt-4 -ml-4 rounded">
          -mt-4 -ml-4 negative margin
        </div>
      </div>
    </div>

    <!-- margin vs padding comparison -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Padding (Inner Spacing)</h3>
        <div class="border-2 border-dashed border-blue-300">
          <div class="bg-blue-100 p-6">
            <div class="bg-blue-500 text-white p-4 rounded text-center">
              Content area
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Margin (Outer Spacing)</h3>
        <div class="border-2 border-dashed border-green-300 p-6">
          <div class="bg-green-500 text-white p-4 rounded text-center m-4">
            Content area
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting margin values individually for each element, while Tailwind uses mx-auto for centering and -mt-4 for negative margins with more intuitive syntax.

Tip: Negative margin uses the - prefix, such as -m-4 and -mt-2, commonly used for overlapping layouts and adjusting element positions.

Width/Height Sizing System

Tailwind provides a rich set of sizing classes, including preset sizes and arbitrary values, with responsive design support.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width/Height Sizing System Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Fixed widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Fixed Widths</h3>
      <div class="space-y-2">
        <div class="bg-blue-200 w-16 h-8 rounded">w-16</div>
        <div class="bg-blue-300 w-32 h-8 rounded">w-32</div>
        <div class="bg-blue-400 w-48 h-8 rounded text-white">w-48</div>
        <div class="bg-blue-500 w-64 h-8 rounded text-white">w-64</div>
        <div class="bg-blue-600 w-96 h-8 rounded text-white">w-96</div>
      </div>
    </div>

    <!-- Percentage widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Percentage Widths</h3>
      <div class="space-y-2">
        <div class="bg-green-200 w-1/2 h-8 rounded">w-1/2 (50%)</div>
        <div class="bg-green-300 w-1/3 h-8 rounded">w-1/3 (33.33%)</div>
        <div class="bg-green-400 w-2/3 h-8 rounded text-white">w-2/3 (66.67%)</div>
        <div class="bg-green-500 w-1/4 h-8 rounded text-white">w-1/4 (25%)</div>
        <div class="bg-green-600 w-3/4 h-8 rounded text-white">w-3/4 (75%)</div>
      </div>
    </div>

    <!-- Special widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Special Widths</h3>
      <div class="space-y-2">
        <div class="bg-purple-200 w-full h-8 rounded">w-full (100%)</div>
        <div class="bg-purple-300 w-screen h-8 rounded">w-screen (100vw)</div>
        <div class="bg-purple-400 w-min h-8 rounded text-white">w-min</div>
        <div class="bg-purple-500 w-max h-8 rounded text-white">w-max</div>
        <div class="bg-purple-600 w-fit h-8 rounded text-white">w-fit</div>
      </div>
    </div>

    <!-- Min/Max widths -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Min/Max Widths</h3>
      <div class="space-y-2">
        <div class="bg-orange-200 min-w-[200px] w-32 h-8 rounded">
          min-w-[200px] w-32
        </div>
        <div class="bg-orange-300 max-w-xs h-8 rounded">
          max-w-xs
        </div>
      </div>
    </div>

    <!-- Height examples -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Heights</h3>
      <div class="flex gap-4 items-end">
        <div class="bg-blue-500 w-16 h-16 rounded"></div>
        <div class="bg-blue-500 w-16 h-24 rounded"></div>
        <div class="bg-blue-500 w-16 h-32 rounded"></div>
        <div class="bg-blue-500 w-16 h-48 rounded"></div>
        <div class="bg-blue-500 w-16 h-64 rounded"></div>
      </div>
      <div class="mt-4 bg-gray-200 h-screen rounded">
        h-screen (100vh)
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Common sizing reference:

Class	Size	Pixels
`w-1`	0.25rem	4px
`w-4`	1rem	16px
`w-8`	2rem	32px
`w-16`	4rem	64px
`w-32`	8rem	128px
`w-64`	16rem	256px
`w-96`	24rem	384px

Traditional CSS vs Tailwind The traditional approach requires setting specific width and height values for each element, while Tailwind uses a rem-based preset system that automatically responds to font size changes.

Box Sizing

Box Sizing controls how element dimensions are calculated, affecting whether padding and border are included in the set width and height.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Sizing Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- box-border demo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border (Default)</h3>
      <p class="text-gray-600 mb-4">Padding and border are included in the set width and height</p>
      <div class="bg-gray-200 p-4">
        <div class="box-border w-64 p-8 border-4 border-blue-500 bg-blue-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">Total width = 256px</p>
        </div>
      </div>
    </div>

    <!-- box-content demo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-content</h3>
      <p class="text-gray-600 mb-4">Padding and border are added outside the set width and height</p>
      <div class="bg-gray-200 p-4">
        <div class="box-content w-64 p-8 border-4 border-green-500 bg-green-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">Total width = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- Comparison -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Comparison</h3>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-center font-medium mb-2">box-border</p>
          <div class="bg-gray-200 p-4">
            <div class="box-border w-full h-32 p-4 border-4 border-blue-500 bg-blue-200 rounded flex items-center justify-center">
              Smaller content area
            </div>
          </div>
        </div>
        <div>
          <p class="text-center font-medium mb-2">box-content</p>
          <div class="bg-gray-200 p-4">
            <div class="box-content w-full h-32 p-4 border-4 border-green-500 bg-green-200 rounded flex items-center justify-center">
              Larger content area
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires using the box-sizing: border-box property, while Tailwind provides two concise class names: box-border and box-content.

Tip: Tailwind defaults to box-border (inherited from the CSS reset), which is the recommended practice for modern web development.

Display Property

The Display property controls how an element is rendered and is the foundation of layout. Tailwind provides a complete set of display utility classes.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Property Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- block and inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block vs inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block (occupies full row)</span>
        <span class="block bg-blue-300 p-2">span - block (occupies full row)</span>
      </div>
      <div class="bg-gray-200 p-4 mt-4">
        <span class="inline bg-green-200 p-2">span - inline</span>
        <span class="inline bg-green-300 p-2">span - inline</span>
        <span class="inline bg-green-400 p-2">span - inline</span>
      </div>
    </div>

    <!-- inline-block -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">inline-block</h3>
      <div class="bg-gray-200 p-4">
        <span class="inline-block bg-purple-200 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-300 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-400 p-4 m-2 rounded text-white">inline-block</span>
        <p class="text-sm text-gray-600 mt-2">Combines features of both inline and block</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden (Hide Element)</h3>
      <div class="bg-gray-200 p-4">
        <p>This text is visible</p>
        <p class="hidden">This text is hidden (display: none)</p>
        <p>This text is also visible</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        Tip: Use hidden or responsive prefixes to control element visibility
      </p>
    </div>

    <!-- flex and grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">flex</h3>
        <div class="flex gap-2">
          <div class="bg-blue-200 p-4 rounded flex-1 text-center">1</div>
          <div class="bg-blue-300 p-4 rounded flex-1 text-center">2</div>
          <div class="bg-blue-400 p-4 rounded flex-1 text-center text-white">3</div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">grid</h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-green-200 p-4 rounded text-center">1</div>
          <div class="bg-green-300 p-4 rounded text-center">2</div>
          <div class="bg-green-400 p-4 rounded text-center text-white">3</div>
          <div class="bg-green-500 p-4 rounded text-center text-white">4</div>
          <div class="bg-green-600 p-4 rounded text-center text-white">5</div>
          <div class="bg-green-700 p-4 rounded text-center text-white">6</div>
        </div>
      </div>
    </div>

    <!-- Responsive display -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Show/Hide</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          Only visible on small screens (block md:hidden)
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          Only visible on medium screens (hidden md:block lg:hidden)
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          Only visible on large screens (hidden lg:block)
        </p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Display class reference:

Class	CSS Value	Description
`block`	`display: block`	Block element
`inline-block`	`display: inline-block`	Inline-block element
`inline`	`display: inline`	Inline element
`flex`	`display: flex`	Flex layout
`inline-flex`	`display: inline-flex`	Inline flex layout
`grid`	`display: grid`	Grid layout
`inline-grid`	`display: inline-grid`	Inline grid layout
`hidden`	`display: none`	Hide element

Traditional CSS vs Tailwind The traditional approach requires setting the display property in CSS, while Tailwind uses semantic class names like block, flex, and grid for more readable code.

Note: hidden completely removes the element (display: none). Use invisible (visibility: hidden) if you need to preserve the element's space.

❓ FAQ

Q What unit is Tailwind's spacing system based on?

A Tailwind defaults to 4px as the base unit. p-1 = 4px, p-2 = 8px, p-4 = 16px, and so on. You can customize the spacing scale through configuration.

Q Why does mx-auto achieve horizontal centering?

A mx-auto sets the left and right margins to auto. When the element has a fixed width, the browser automatically calculates equal margins on both sides, achieving horizontal centering. The element must be block-level.

Q What is the difference between w-full and w-screen?

A w-full = 100% of the parent element's width, w-screen = 100vw (viewport width). Viewport width is typically used for elements that need to span the entire screen.

Q When should I use box-content?

A Use it when you need padding and border to be rendered outside the set width and height. In most cases, the default box-border produces more predictable results.

📖 Summary

Padding controls inner spacing using p-, px-, py-, pt-, pr-, pb-, pl- prefixes
Margin controls outer spacing; mx-auto enables horizontal centering
Width/Height offers fixed values, percentages, viewport units, and more
Box Sizing defaults to box-border, where padding and border are included in the set dimensions
Display includes block, inline, flex, grid, hidden, and other options
Combined with responsive prefixes, you can control element visibility across different screen sizes

📝 Exercises

⭐ Create a card component using p-6 for padding, m-4 for margin, w-80 for width, and mx-auto for horizontal centering
⭐⭐ Create a responsive grid layout using a mix of display: grid and display: flex, with a single column on mobile and two columns on desktop
⭐⭐⭐ Create a complete page layout with a fixed-width sidebar (w-64) and an adaptive main content area (flex-1), using box-border to ensure correct size calculations

Tailwind CSS Box Model & Display: Spacing, Sizing, and Display

Padding Spacing System

Example

Margin Spacing System

Example

Width/Height Sizing System

Example

Box Sizing

Example

Display Property

Example

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好