W3.CSS Padding Last Updated : 02 Mar, 2021 Comments Improve Suggest changes Like Article Like 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 ClassesSized 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= "https://www.w3schools.com/w3css/4/w3.css"> </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= "https://www.w3schools.com/w3css/4/w3.css"> </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: Comment More infoAdvertise with us Next Article W3.CSS Padding A aditya_taparia Follow Improve Article Tags : Technical Scripter Web Technologies HTML CSS W3.CSS +1 More Similar Reads CSS Padding Padding is the space between the content and the defined border of an element. Padding means adding spaces inside the element, controlling its internal space, thus affecting its dimensions and appearance. Table of Content CSS PaddingShorthand Property for Padding in CSS All CSS Padding PropertiesCSS 6 min read Tailwind CSS Padding This class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS Padding Property. This class is used to create space around the element, inside any defined border. We can set different paddings for individual sides (top, right 3 min read Primer CSS Padding Padding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be 3 min read CSS | Scroll Padding The Scroll Padding property is an inbuilt property in Scroll Snap module. This property sets the scroll padding longhands. This property acts as a magnet on the top of the sliding element that sticks to the top of the viewport and stops the scrolling(forcefully) in that place. The Scroll Padding pro 2 min read W3.CSS Margin W3.CSS has many facilities of classes to easily style elements in HTML. It includes various responsive margin classes for modification of the appearance of the element. The list of margin classes are as follows: Sr. No. Class Name Description 1. w3-margin It adds 16px of margin to all the sides of t 2 min read Like