W3.CSS Margin

Last Updated : 02 Mar, 2021

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:

Suggest improvement

CSS Margin

Share your thoughts in the comments

W3.CSS Margin

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?