Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

W3.CSS Margins


The w3-margin class adds 16px margin to all sides of an element.


W3.CSS Margin Classes

W3.CSS provides the following margin classes:

Class Defines
w3-margin Adds a 16px margin to all sides of an element
w3-margin-top Adds a 16px top margin to an element
w3-margin-right Adds a 16px right margin to an element
w3-margin-bottom Adds a 16px bottom margin to an element
w3-margin-left Adds a 16px left margin to an element
w3-section Adds a 16px top and bottom margin to an element

Margin

The w3-margin class adds a 16px margin to all sides of an element:

The w3-margin class adds 16px margin to all sides of an element.

Example

<div class="w3-container w3-margin">
  <p>I have 16px margin on all sides.</p>
</div>
Try It Yourself »

Margin Top

The w3-margin-top class adds a 16px top margin to an element:

The w3-margin-top class adds a 16px top margin to an element.

Example

<div class="w3-container w3-margin-top">
  <p>I have 16px margin on the top.</p>
</div>
Try It Yourself »


Margin Bottom

The w3-margin-bottom class adds a 16px bottom margin to an element:

The w3-margin-bottom class adds a 16px bottom margin to an element.

Example

<div class="w3-container w3-margin-bottom">
  <p>I have 16px margin on the bottom.</p>
</div>
Try It Yourself »

Margin Left

The w3-margin-left class adds a 16px left margin to an element:

The w3-margin-left class adds a 16px left margin to an element.

Example

<div class="w3-container w3-margin-left">
  <p>I have 16px margin the left.</p>
</div>
Try It Yourself »

Margin Right

The w3-margin-right class adds a 16px right margin to an element:

The w3-margin-right class adds a 16px right margin to an element.

Example

<div class="w3-container w3-margin-right">
  <p>I have 16px margin the right.</p>
</div>
Try It Yourself »

Sections

Many HTML elements do not have a default top or bottom margin. Such elements will display without a margin between them:

I am Blue

I am Green

The w3-section class can be used to separate elements.

It adds 16px top and bottom margin to any HTML element:

I am Blue

I am Green

Example

<div class="w3-container w3-section w3-blue">
  <h1>I am Blue</h1>
</div>

<div class="w3-container w3-section w3-green">
  <h1>I am Green</h1>
</div>
Try It Yourself »