UCLA Web Components

Spacing 

<!-- Margin -->
<h2>Margin</h2>
<p class="mb-2">This sentence has 0.125rem (browser renders to 2px) of margin spacing below it</p>
<p class="mb-4">This sentence has 0.25rem (browser renders to 4px) of margin spacing below it</p>
<p class="mb-8">This sentence has 0.5rem (browser renders to 8px) of margin spacing below it</p>
<p class="mb-12">This sentence has 0.75rem (browser renders to 12px) of margin spacing below it</p>
<p class="mb-16">This sentence has 1rem (browser renders to 16px) of margin spacing below it</p>
<p class="mb-24">This sentence has 1.5rem (browser renders to 24px) of margin spacing below it</p>
<p class="mb-32">This sentence has 2rem (browser renders to 32px) of margin spacing below it</p>
<p class="mb-64">This sentence has 4rem (browser renders to 64px) of margin spacing below it</p>
<p class="mb-80">This sentence has 5rem (browser renders to 80px) of margin spacing below it</p>
<p class="mb-12 mb-md-36 mb-lg-72">This sentence has 12px of margin below it on small screens, 36px of margin on MEDIUM size screens and 72px on LARGE size screens.</p>


<!-- Padding -->
<h2 class="mt-24">Padding</h2>
<p class="pb-2">This sentence has 2px of padding spacing below it</p>
<p class="pb-4">This sentence has 4px of padding spacing below it</p>
<p class="pb-8">This sentence has 8px of padding spacing below it</p>
<p class="pb-12">This sentence has 12px of padding spacing below it</p>
<p class="pb-16">This sentence has 16px of padding spacing below it</p>
<p class="pb-24">This sentence has 24px of padding spacing below it</p>
<p class="pb-32">This sentence has 32px of padding spacing below it</p>
<p class="pb-64">This sentence has 64px of padding spacing below it</p>
<p class="pb-80">This sentence has 80px of padding spacing below it</p>
<p class="pl-md-32">This sentence has 32px of padding spacing to the left on medium screens and above.</p>


<!-- Center -->
<h2 class="mt-24">Center</h2>
<div class="mt-32 mx-auto" style="width: 250px;">
    <p class="mb-12">Centered element with a margin top of 32px. First child paragraph has a margin bottom of 12px.</p>
</div>


<!-- Margin -->
<h2>Margin</h2>
<p class="mb-2">This sentence has 0.125rem (browser renders to 2px) of margin spacing below it</p>
<p class="mb-4">This sentence has 0.25rem (browser renders to 4px) of margin spacing below it</p>
<p class="mb-8">This sentence has 0.5rem (browser renders to 8px) of margin spacing below it</p>
<p class="mb-12">This sentence has 0.75rem (browser renders to 12px) of margin spacing below it</p>
<p class="mb-16">This sentence has 1rem (browser renders to 16px) of margin spacing below it</p>
<p class="mb-24">This sentence has 1.5rem (browser renders to 24px) of margin spacing below it</p>
<p class="mb-32">This sentence has 2rem (browser renders to 32px) of margin spacing below it</p>
<p class="mb-64">This sentence has 4rem (browser renders to 64px) of margin spacing below it</p>
<p class="mb-80">This sentence has 5rem (browser renders to 80px) of margin spacing below it</p>
<p class="mb-12 mb-md-36 mb-lg-72">This sentence has 12px of margin below it on small screens, 36px of margin on MEDIUM size screens and 72px on LARGE size screens.</p>

<!-- Padding -->
<h2 class="mt-24">Padding</h2>
<p class="pb-2">This sentence has 2px of padding spacing below it</p>
<p class="pb-4">This sentence has 4px of padding spacing below it</p>
<p class="pb-8">This sentence has 8px of padding spacing below it</p>
<p class="pb-12">This sentence has 12px of padding spacing below it</p>
<p class="pb-16">This sentence has 16px of padding spacing below it</p>
<p class="pb-24">This sentence has 24px of padding spacing below it</p>
<p class="pb-32">This sentence has 32px of padding spacing below it</p>
<p class="pb-64">This sentence has 64px of padding spacing below it</p>
<p class="pb-80">This sentence has 80px of padding spacing below it</p>
<p class="pl-md-32">This sentence has 32px of padding spacing to the left on medium screens and above.</p>

<!-- Center -->
<h2 class="mt-24">Center</h2>
<div class="mt-32 mx-auto" style="width: 250px;">
  <p class="mb-12">Centered element with a margin top of 32px. First child paragraph has a margin bottom of 12px.</p>
</div>
 
/* Margin: No context defined. */


/* Padding */
{
  "order": 2
}


/* Center */
{
  "order": 3
}

No notes defined.