Open In App

W3.CSS Padding

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  
    <!-- 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:

HTML




<!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:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads