W3CSS Margins

In the previous article we studied what different types of padding classes are available in W3CSS. In this article we shall study W3CSS margins. There are a total of 8 classes in W3CSS that deal with margins. These are w3-margin which adds a 16px margin to all sides of an element. Similarly, w3-margin-top and w3-margin-bottom classes add a 16px margin at the top and bottom of an element. Likewise, w3-margin-right and w3-margin-left classes add a 16px margin to the right and left of an element. w3-margin-0 removes margins from all sides. Finally there is a w3-section class that adds a top and bottom margin of 16px to an element.

W3CSS Margins Example

Let’s take very simple example where we shall see w3-margin, w3-margin-top, w3-margin-bottom, w3-margin-right and w3-margin-left classes in action. Take a look at the following piece of code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pink w3-margin">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-top">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-bottom">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-right">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-left">This is some random text</div>
    
</html>

Download the code Try the code

In the above example we have five divs and we have set different margins to each of the div. The first div has margin of 16px on all sides. The second div has a margin on top of 16px while the third div has a margin of 16px at the bottom. Similarly, 4h and 5th divs have margin on right and left respectively. To see if these margin classes actual work, open the above web page in the browser and you should see corresponding margin of 16px applied.

W3CSS Section

As said earlier, the w3-section class adds 16px both at the bottom and top of the element. Let’s see w3-section class in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pink w3-section">This is some random text</div>
    <div class="w3-panel w3-pink">This is some random text</div>

    
</html>

Download the code Try the code

Take a look at the above code, here we have a div with class w3-section. For the second div we did not specify any margin class. When you open the above page in browser, you shall see that the upper pink div has margin both at its top and bottom.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .