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 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 CSS Padding vs Margin CSS padding controls the space between an element's content and its border, while CSS margin manages the space outside an element, separating it from other elements. Both properties are essential for creating a well-structured and visually appealing layout. Padding: Adds space inside an element, bet 4 min read CSS | Scroll Padding top The Scroll Padding top is an inbuilt property in Scroll Snap module. This property set the scroll padding top longhand. This property acts as a magnet on the top of the sliding element that stick to the top of the view-port and stop the scrolling(forcefully) in that place. The Scroll Padding propert 2 min read CSS | Scroll Padding bottom The Scroll Padding bottom is an inbuilt property in Scroll Snap module. This property set the scroll padding longhand. This property acts as a magnet on the top of the sliding element that stick to the top of the view-port and stop the scrolling(forcefully) in that place. The Scroll Padding property 2 min read W3.CSS Lists Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list. Example: Adding a list on a webp 5 min read W3.CSS Introduction What is W3.CSS?W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS frameworks.It aims to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop.W3.CSS was designed to be a high-quality 2 min read Like