Tailwind CSS Spacing Complete Reference

Last Updated : 03 Aug, 2023

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Spacing utilities manage and control the elements of padding, element’s margin, and space between child elements.

Tailwind CSS Class	Description	Example
Padding	It creates space around the element, inside any defined border.	Try
Margin	It creates space around the element, outside any defined border.	Try
Space Between	It is used for controlling the space between child elements.	Try

Below example will give you a brief idea about the Spacing of Tailwind CSS:

Example:

HTML

<!DOCTYPE html> 
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="mx-4 space-y-4"> 
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">1</div> 
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">2</div> 
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">3</div> 
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">4</div> 
    </div> 
</body> 
  
</html> 