0
0
Tailwindmarkup~5 mins

Block, inline, and inline-block in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

These display styles control how elements sit and flow on a webpage. They help you arrange content clearly and nicely.

When you want an element to take up the full width and start on a new line (like paragraphs).
When you want elements to flow side by side without forcing a new line (like links in a sentence).
When you want elements to flow side by side but still behave like blocks (so you can set width and height).
Syntax
Tailwind
block
inline
inline-block

In Tailwind CSS, use block, inline, and inline-block classes to set these display types.

These classes control how elements behave in layout and spacing.

Examples
This element takes full width and starts on a new line.
Tailwind
<div class="block">Block element</div>
This element flows inside text without breaking the line.
Tailwind
<span class="inline">Inline element</span>
This element flows inline but you can set width and height.
Tailwind
<div class="inline-block">Inline-block element</div>
Sample Program

This example shows three elements with different display styles using Tailwind classes:

  • The blue block paragraph takes full width and starts on a new line.
  • The green inline span flows inside text without breaking the line.
  • The red and yellow inline-block divs sit side by side and have fixed width and height.
Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Block, Inline, Inline-block Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <p class="block bg-blue-200 p-2 mb-2">This is a block element. It takes full width and starts on a new line.</p>
  <p>
    This is some text with an <span class="inline bg-green-200">inline element</span> inside it.
    The inline element does not break the line.
  </p>
  <div class="inline-block bg-red-200 p-2 mt-4" style="width: 150px; height: 50px;">
    Inline-block element with set width and height.
  </div>
  <div class="inline-block bg-yellow-200 p-2 ml-2" style="width: 150px; height: 50px;">
    Another inline-block next to it.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Block elements always start on a new line and stretch to fill the container width.

Inline elements flow inside text and ignore width and height settings.

Inline-block elements flow inline but respect width and height, letting you size them.

Summary

Block elements break lines and fill width.

Inline elements flow inside text without line breaks.

Inline-block elements flow inline but can have size.