Add Space using the Margin
Margin utilities are used to add spaces outside an element, affecting its position relative to other elements.
- Add Margin to All Sides
- Add Margin to Specific Side
- Add Margin to X-axis and Y-axis
Syntax:
<div class="m-4 bg-gray-200">All sides margin</div>
<div class="mt-4 bg-gray-200">Top margin only</div>
<div class="mx-4 my-2 bg-gray-200">X and Y axis margin</div>
Example: Add spaces between elements using margin utilities.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Rounded Corners with Tailwind CSS</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="p-10"> <div class="m-4 bg-green-200 w-24 h-24"> All sides Margin </div><br> <div class="mt-4 bg-green-200 w-24 h-24"> Top Margin </div><br> <div class="mx-4 my-2 bg-green-200 w-24 h-24"> X and Y axis Margin </div> </body> </html> |
Output
How to Add Space Between Elements in Tailwind CSS ?
Spacing between elements is a critical aspect of web design, affecting readability, flow, and the overall aesthetic of a website. Tailwind CSS, a utility-first CSS framework, provides an extensive set of spacing utilities that make it basic to control padding, margin, and gap spaces within and around elements. This article will delve into the various ways you can add spacing between elements using Tailwind CSS, complete with detailed descriptions and HTML code examples.