Skip to content
Related Articles

Related Articles

Improve Article

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=
</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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :