W3.CSS Padding
Last Updated :
02 Mar, 2021
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:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container" >
< h3 class = "w3-text-blue" >
Numbered Padding Classes:
</ h3 >
< div class = "w3-container w3-padding-16 w3-teal" >
< p >Using w3-padding-16 class...</ p >
</ div >
< br >
< div class = "w3-container w3-padding-24 w3-pink" >
< p >Using w3-padding-24 class...</ p >
</ div >
< br >
< div class = "w3-container w3-padding-32 w3-deep-orange" >
< p >Using w3-padding-32 class...</ p >
</ div >
< br >
< div class = "w3-container w3-padding-48 w3-purple" >
< p >Using w3-padding-48 class...</ p >
</ div >
< br >
< 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:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container" >
< h3 class = "w3-text-blue" >
Sized Padding Classes:
</ h3 >
< div class="w3-container
w3-padding-small w3-teal">
< p >Using w3-padding-small class...</ p >
</ div >
< br >
< div class = "w3-container w3-padding w3-pink" >
< p >Using w3-padding class...</ p >
</ div >
< br >
< div class="w3-container w3-padding-large
w3-deep-orange">
< p >Using w3-padding-large class...</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...