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
Thew3-margin class adds a 16px margin to all sides of an element:
Thew3-margin class adds 16px margin to all sides of an element.
Example
<p>I have 16px margin on all sides.</p>
</div>
Margin Top
Thew3-margin-top class adds a 16px top margin to an element:
Thew3-margin-top class adds a 16pxtop margin to an element.
Example
<p>I have 16px margin on the top.</p>
</div>
Margin Bottom
Thew3-margin-bottom class adds a 16px bottom margin to an element:
Thew3-margin-bottom class adds a 16pxbottom margin to an element.
Example
<p>I have 16px margin on the bottom.</p>
</div>
Margin Left
Thew3-margin-left class adds a 16px left margin to an element:
Thew3-margin-left class adds a 16pxleft margin to an element.
Example
<p>I have 16px margin the left.</p>
</div>
Margin Right
Thew3-margin-right class adds a 16px right margin to an element:
Thew3-margin-right class adds a 16pxright margin to an element.
Example
<p>I have 16px margin the right.</p>
</div>
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
Thew3-section class can be used to separate elements.
It adds16px top and bottom margin to any HTML element:
I am Blue
I am Green
Example
<h1>I am Blue</h1>
</div>
<div class="w3-container w3-section w3-green">
<h1>I am Green</h1>
</div>
