Display Block block

Make elements display as block-level elements that take up the full width of their container and stack vertically.

Quick Reference

block

Display as block element

display: block

inline-block

Display as inline-block

display: inline-block

inline

Display as inline element

display: inline

Interactive Examples

Block Elements

Block Element 1
Block Element 2
Block Element 3
<div class="block">Block Element 1</div>
<div class="block">Block Element 2</div>
<div class="block">Block Element 3</div>

Inline vs Block Comparison

Inline Elements

Inline 1Inline 2Inline 3

Block Elements

Block 1Block 2Block 3

Converting Inline to Block

Default Inline Behavior

This is a link and this is bold text and this is italic text all inline.

Converted to Block

This is a link and this is bold text and this is italic text all as blocks.
<a href="#" class="block">Link as block</a>
<strong class="block">Bold as block</strong>
<em class="block">Italic as block</em>

Block with Width Control

Full Width Block (w-full)
3/4 Width Block (w-3/4)
Half Width Block (w-1/2)
Quarter Width (w-1/4)
<div class="block w-full">Full Width</div>
<div class="block w-3/4">3/4 Width</div>
<div class="block w-1/2">Half Width</div>

Common Use Cases

🔗 Navigation Links

Convert inline navigation links to stack vertically on mobile.

<a class="block md:inline">

🏷️ Form Labels

Make labels display as block elements above form inputs.

<label class="block">

🖼️ Image Containers

Make images behave as block elements for better layout control.

<img class="block">

📝 Text Elements

Convert inline text elements to block for vertical stacking.

<span class="block">

🔘 Button Groups

Stack buttons vertically instead of horizontally.

<button class="block w-full">

📱 Mobile Layouts

Create responsive layouts that stack on smaller screens.

<div class="block lg:inline-block">

Block Element Characteristics

Key Properties

Full Width

Takes up the full width of its container by default

Vertical Stacking

Each block element starts on a new line

Width & Height Control

Can set explicit width and height values

Margin & Padding

Respects all margin and padding values

Content Flow

Can contain other block and inline elements

Visual Demonstration

Block Element
Full width, starts new line
Block Element with Custom Width
75% width, still starts new line
Block Element
50% width, new line

Best Practices

✅ Do

  • • Use block for form labels and inputs
  • • Apply to navigation links for mobile stacking
  • • Use with responsive utilities for adaptive layouts
  • • Combine with width utilities for controlled sizing
  • • Use for creating vertical button groups
  • • Apply to images for better layout control

❌ Don't

  • • Use unnecessarily on elements that are already block
  • • Apply without considering layout implications
  • • Use when flexbox or grid would be more appropriate
  • • Forget to test responsive behavior
  • • Use for complex multi-column layouts
  • • Apply without understanding the box model

Related Display Classes

block

Current page

float-*

Float utilities

clear-*

Clear utilities

isolate

Isolation utilities