W3.CSS Margin 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 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 the element on which it is used. 2. w3-margin-top It adds 16px of margin to the top of the element on which it is used. 3. w3-margin-right It adds 16px of margin to the right of the element on which it is used. 4. w3-margin-bottom It adds 16px of margin to the bottom of the element on which it is used. 5. w3-margin-left It adds 16px of margin to the left of the element on which it is used. 6. w3-section It adds 16px of margin to the top and bottom of the element on which it is used. In W3.CSS, the following classes as used in the code are used to implement margins from the division. HTML <!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- 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> <!-- Margin Classes in W3.CSS --> <div class="w3-container"> <!-- Margin Classes --> <h3 class="w3-text-blue">Margin Classes:</h3> <!-- w3-margin class --> <div class="w3-border"> <div class="w3-container w3-margin w3-teal"> <p>Using w3-margin class...</p> </div> </div> <br> <!-- w3-margin-top class --> <div class="w3-border"> <div class="w3-container w3-margin-top w3-teal"> <p>Using w3-margin-top class...</p> </div> </div> <br> <!-- w3-margin-right class --> <div class="w3-border"> <div class="w3-container w3-margin-right w3-teal"> <p>Using w3-margin-right class...</p> </div> </div> <br> <!-- w3-margin-bottom class --> <div class="w3-border"> <div class="w3-container w3-margin-bottom w3-teal"> <p>Using w3-margin-bottom class...</p> </div> </div> <br> <!-- w3-margin-left class --> <div class="w3-border"> <div class="w3-container w3-margin-left w3-teal"> <p>Using w3-margin-left class...</p> </div> </div> <br> <!-- w3-section class --> <div class="w3-border"> <div class="w3-container w3-section w3-teal"> <p>Using w3-section class...</p> </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article W3.CSS Margin A aditya_taparia Follow Improve Article Tags : Technical Scripter Web Technologies HTML CSS W3.CSS +1 More Similar Reads CSS Margin CSS Margin is the space outside an element, separating it from other elements. It adds space around an element, affecting its positioning and creating gaps between other elements. CSS provides properties to specify the margin for each side of an element individually. margin-top: Sets the margin spac 4 min read CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head> 4 min read Tailwind CSS Margin This class accepts lots of values in tailwind CSS in which all the properties are covered as in the class form. It is the alternative to the CSS Margin Property. This class is used to create space around the element, outside any defined border. We can set different margins for individual sides(top, 4 min read W3.CSS Padding 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 3 min read Primer CSS Margin Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.In this article, we'll s 3 min read Like