HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The w3-margin class adds 16px margin to all sides of an element
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 |
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.
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
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.
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
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.
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
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.
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
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.
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Many HTML elements do not have a default top or bottom margin. Such elements will display without a margin between them:
The w3-section class can be used to separate elements.
It adds 16px top and bottom margin to any HTML element:
<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>