W3.CSS Margins
Margins
Margins create space outside an element.
W3.CSS provides classes for adding 16px margins around or beside elements.
What is a Margin?
A margin is the space outside the border of an element.
Margin
The white space around this green element is its margin.
Example
<div class="w3-container w3-green w3-margin">
<h3>Margin</h3>
<p>The white space around this element is its margin.</p>
</div>
Try it Yourself »
Padding vs Margin
Padding creates space inside an element.
Margin creates space outside an element.
Padding: Space inside the blue element.
Margin: Space outside the blue element.
Margin Classes
All W3.CSS margin classes use 16px margins.
| Class | Description |
|---|---|
w3-margin |
Adds 16px margin on all sides |
w3-margin-top |
Adds 16px top margin |
w3-margin-right |
Adds 16px right margin |
w3-margin-bottom |
Adds 16px bottom margin |
w3-margin-left |
Adds 16px left margin |
w3-section |
Adds 16px top and bottom margin |
Margin on All Sides
The w3-margin class adds a 16px margin on all sides.
I have a 16px margin on all sides.
Example
<div class="w3-container w3-green w3-margin">
<p>I have a 16px margin on all sides.</p>
</div>
Try it Yourself »
Margins on Individual Sides
Use directional margin classes when you only need space on one side.
w3-margin-top.
w3-margin-bottom.
w3-margin-left.
w3-margin-right.
Example
<div class="w3-margin-top">Top margin</div>
<div class="w3-margin-right">Right margin</div>
<div class="w3-margin-bottom">Bottom margin</div>
<div class="w3-margin-left">Left margin</div>
Try it Yourself »
The Section Class
Many HTML elements do not have a default top or bottom margin. Such elements will display without a margin between them.
First Section
Second Section
The w3-section class adds 16px top and bottom margins.
It is useful for separating sections of content.
First Section
Second Section
Note
Without w3-section, the two elements touch.
Example
<div class="w3-container w3-blue w3-section">
<h2>First Section</h2>
</div>
<div class="w3-container w3-green w3-section">
<h2>Second Section</h2>
</div>
Try it Yourself »
Spacing Between Cards
Margins are useful when separate components need space between them.
Design
Create clean interfaces.
Develop
Build responsive websites.
Deploy
Publish your work.
Example
<div class="w3-card w3-container">...</div>
<div class="w3-card w3-container w3-margin-top">...</div>
<div class="w3-card w3-container w3-margin-top">...</div>
Try it Yourself »
What You Have Learned
- Margins create space outside an element
- Padding creates space inside an element
w3-marginadds 16px margin on all sides- The directional margin classes add 16px margin to one side
w3-sectionadds 16px top and bottom margins- Margins are useful for separating sections and components
More Examples
Explore more ways to use W3.CSS margins.
Top Margin
The w3-margin-top class adds a 16px top margin to an element:
Example
<div class="w3-container w3-margin-top">
<p>I have a 16px top margin.</p>
</div>
Try it Yourself »
Bottom Margin
The w3-margin-bottom class adds a 16px bottom margin to an element:
Example
<div class="w3-container w3-margin-bottom">
<p>I have a 16px bottom margin.</p>
</div>
Try it Yourself »
Left Margin
The w3-margin-left class adds a 16px left margin to an element:
Example
<div class="w3-container w3-margin-left">
<p>I have a 16px left margin.</p>
</div>
Try it Yourself »
Right Margin
The w3-margin-right class adds a 16px right margin to an element:
Example
<div class="w3-container w3-margin-right">
<p>I have a 16px right margin.</p>
</div>
Try it Yourself »
