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
<h3>Padding</h3>
<p>The blue space around this text is padding.</p>
</div>
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">Normal padding</div>
<div class="w3-padding-large">Large padding</div>
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-32">32px padding</div>
<div class="w3-padding-64">64px padding</div>
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
<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>
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
<h2>Welcome</h2>
<p>Normal padding with extra top padding.</p>
</div>
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