Spacing Utilities

Padding

Add internal spacing around element content:

<!-- All sides -->
<div class="bismillah-p-4">Padding on all sides</div>

<!-- Top & Bottom -->
<div class="bismillah-py-4">Vertical padding</div>

<!-- Left & Right -->
<div class="bismillah-px-4">Horizontal padding</div>

<!-- Individual sides -->
<div class="bismillah-pt-4">Padding top</div>
<div class="bismillah-pb-4">Padding bottom</div>
<div class="bismillah-pl-4">Padding left</div>
<div class="bismillah-pr-4">Padding right</div>

Margin

Add external spacing around elements:

<!-- All sides -->
<div class="bismillah-m-4">Margin on all sides</div>

<!-- Top & Bottom -->
<div class="bismillah-my-4">Vertical margin</div>

<!-- Left & Right -->
<div class="bismillah-mx-4">Horizontal margin</div>

<!-- Individual sides -->
<div class="bismillah-mt-4">Margin top</div>
<div class="bismillah-mb-4">Margin bottom</div>
<div class="bismillah-ml-4">Margin left</div>
<div class="bismillah-mr-4">Margin right</div>

<!-- Negative margins -->
<div class="bismillah--m-4">Negative margin</div>
<div class="bismillah--mt-2">Negative margin top</div>

Center Elements

Use marginauto to center elements:

<!-- Center horizontally -->
<div class="bismillah-mx-auto">Centered horizontally</div>

<!-- Center both ways -->
<div class="bismillah-mx-auto bismillah-my-auto">Centered both ways</div>

Gap

Control spacing between flex and grid items:

<!-- Gap between all items -->
<div class="bismillah-flex bismillah-gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal gap only -->
<div class="bismillah-flex bismillah-gap-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical gap only -->
<div class="bismillah-flex bismillah-flex-col bismillah-gap-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Spacing Scale

BismillahCSS uses a consistent spacing scale (in rem, with 1rem = 16px):

Space Between

Add consistent spacing between child elements:

<!-- Add margin between each item -->
<div class="bismillah-space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal spacing -->
<div class="bismillah-space-x-4">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

Common Patterns

<!-- Mobile: less padding, desktop: more padding -->
<div class="bismillah-p-4 md:bismillah-p-8 lg:bismillah-p-12">
  Content with responsive padding
</div>

<!-- Items with consistent spacing -->
<ul class="bismillah-space-y-2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Form fields with spacing -->
<form class="bismillah-space-y-4">
  <div>
    <label class="bismillah-block bismillah-mb-1">Email</label>
    <input type="email" class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-rounded" />
  </div>
  <div>
    <label class="bismillah-block bismillah-mb-1">Password</label>
    <input type="password" class="bismillah-w-full bismillah-px-3 bismillah-py-2 bismillah-border bismillah-rounded" />
  </div>
</form>

<!-- Grid items with gaps -->
<div class="bismillah-grid bismillah-grid-cols-3 bismillah-gap-4">
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 1</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 2</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Card 3</div>
</div>

<!-- Card with internal and external spacing -->
<div class="bismillah-mb-6">
  <div class="bismillah-bg-white bismillah-rounded-lg bismillah-p-6 bismillah-shadow">
    <h3 class="bismillah-text-lg bismillah-font-bold bismillah-mb-2">Title</h3>
    <p class="bismillah-text-gray-600 bismillah-mb-4">Description</p>
    <button class="bismillah-mt-4">Action</button>
  </div>
</div>

Spacing Tips

• Use consistent values: Stick to the spacing scale for a cohesive design.
• Combine padding and margin: Use padding for internal spacing, margin for gaps between elements.
• Responsive spacing: Use different spacing on mobile vs. desktop for better layout.
• Space-between is helpful: Automatically add spacing between sequential items.
• Gap over margin: For flex and grid, use gap instead of margin on children.