W3.CSS Padding
Padding
Padding creates space inside an element.
W3.CSS provides classes for adding different amounts of padding.
What is Padding?
Padding is the space between the content of an element and its border.
Padding
The blue space around this text is padding.
Example
<div class="w3-container w3-blue w3-padding-32">
<h3>Padding</h3>
<p>The blue space around this text is padding.</p>
</div>
Try it Yourself »
Padding Size Classes
The padding size classes add padding on all four sides of an element.
| Class | Top and Bottom | Left and Right |
|---|---|---|
w3-padding-small |
4px | 8px |
w3-padding |
8px | 16px |
w3-padding-large |
12px | 24px |
w3-padding-small
w3-padding
w3-padding-large
Example
<div class="w3-padding-small">Small padding</div>
<div class="w3-padding">Normal padding</div>
<div class="w3-padding-large">Large padding</div>
Try it Yourself »
Vertical Padding
The numbered padding classes add padding to the top and bottom of an element.
| Class | Top and Bottom |
|---|---|
w3-padding-16 |
16px |
w3-padding-24 |
24px |
w3-padding-32 |
32px |
w3-padding-48 |
48px |
w3-padding-64 |
64px |
Example
<div class="w3-padding-16">16px padding</div>
<div class="w3-padding-32">32px padding</div>
<div class="w3-padding-64">64px padding</div>
Try it Yourself »
The numbered classes add vertical padding only.
They do not add left or right padding.
Top Padding
W3.CSS also provides classes for adding padding only to the top of an element.
| Class | Top Padding |
|---|---|
w3-padding-top-24 |
24px |
w3-padding-top-32 |
32px |
w3-padding-top-48 |
48px |
w3-padding-top-64 |
64px |
Padding a Section
Large vertical padding is useful for creating clear sections on a web page.
Explore Norway
Mountains, fjords, cities, and northern lights.
Example
<div class="w3-container w3-blue w3-center w3-padding-48">
<h2>Explore Norway</h2>
<p class="w3-large">Mountains, fjords, cities, and northern lights.</p>
<button class="w3-button w3-white w3-round">Explore</button>
</div>
Try it Yourself »
Combine Padding Classes
Padding classes can be combined when you need padding in different directions.
Welcome
This element has normal padding on all sides and extra padding at the top.
Example
<div class="w3-container w3-light-grey w3-padding w3-padding-top-48">
<h2>Welcome</h2>
<p>Normal padding with extra top padding.</p>
</div>
Try it Yourself »
What You Have Learned
- Padding creates space inside an element
w3-padding-small,w3-padding, andw3-padding-largeadd padding on all sides- The numbered padding classes add vertical padding
- The
w3-padding-top-*classes add top padding - Padding classes can be combined
