W3.CSS has many facilities of classes to easily style elements in HTML. It includes various responsive padding classes for modification of the appearance of the element. There are two types of padding classes:
- Numbered Padding Classes
- Sized Padding Classes
Numbered Padding Classes: These classes add top and bottom padding to the targeted element based on number assigned to them. The list of classes that comes under this category are as follows:
Sr. No. |
Class Name |
Description |
---|---|---|
1. |
w3-padding-16 |
This class adds 16px top and bottom padding to the targeted element. |
2. |
w3-padding-24 |
This class adds 24px top and bottom padding to the targeted element. |
3. |
w3-padding-32 |
This class adds 32px top and bottom padding to the targeted element. |
4. |
w3-padding-48 |
This class adds 48px top and bottom padding to the targeted element. |
5. |
w3-padding-64 |
This class adds 64px top and bottom padding to the targeted element. |
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Numbered Padding Classes in W3.CSS -->
< div class = "w3-container" >
<!-- Numbered Padding Classes -->
< h3 class = "w3-text-blue" >
Numbered Padding Classes:
</ h3 >
<!-- w3-padding-16 class -->
< div class = "w3-container w3-padding-16 w3-teal" >
< p >Using w3-padding-16 class...</ p >
</ div >
< br >
<!-- w3-padding-24 class -->
< div class = "w3-container w3-padding-24 w3-pink" >
< p >Using w3-padding-24 class...</ p >
</ div >
< br >
<!-- w3-padding-32 class -->
< div class = "w3-container w3-padding-32 w3-deep-orange" >
< p >Using w3-padding-32 class...</ p >
</ div >
< br >
<!-- w3-padding-48 class -->
< div class = "w3-container w3-padding-48 w3-purple" >
< p >Using w3-padding-48 class...</ p >
</ div >
< br >
<!-- w3-padding-64 class -->
< div class = "w3-container w3-padding-64 w3-blue" >
< p >Using w3-padding-64 class...</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Sized Padding Classes: These classes add top, bottom, left, and right padding to the targeted element based on their size. The list of classes that comes under this category are as follows:
Sr. No. |
Class Name |
Description |
---|---|---|
1. |
w3-padding-small |
This class adds 4px top, bottom and 8px left, right padding to the element. |
2. |
w3-padding |
This class adds 8px top, bottom and 16px left, right padding to the element. |
3. |
w3-padding-large |
This class adds 12px top, bottom and 24px left, right padding to the element. |
Example:
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" href =
</ head >
< body >
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Sized Padding Classes in W3.CSS -->
< div class = "w3-container" >
<!-- Sized Padding Classes -->
< h3 class = "w3-text-blue" >
Sized Padding Classes:
</ h3 >
<!-- w3-padding-small class -->
< div class="w3-container
w3-padding-small w3-teal">
< p >Using w3-padding-small class...</ p >
</ div >
< br >
<!-- w3-padding class -->
< div class = "w3-container w3-padding w3-pink" >
< p >Using w3-padding class...</ p >
</ div >
< br >
<!-- w3-padding-large class -->
< div class="w3-container w3-padding-large
w3-deep-orange">
< p >Using w3-padding-large class...</ p >
</ div >
</ div >
</ body >
</ html >
|
Output: