W3CSS Padding

Padding is the distance between the contents of the element and the border of the element. Unlike margins, it is the internal distance between element border and the content inside the element. Though, you can use raw CSS to specify precise padding measurements for any element, W3CSS padding classes come with some general padding size.

Padding for different elements can be specified via two sets of classes in W3CSS. The first set is the number based padding where you use class w3-padding-x where x can be 2,4,8,12,16,24,32,48,64 and 128. The number corresponds to the number of pixels of padding added at the top and bottom. For instance if you use class w3-padding-28 for an element, it will add 28 pixel padding at the top and bottom of the element. Similarly, using w3-padding-0 removes padding from top and bottom of the element.

W3CSS Padding Example

Let’s take a look at a an example that demonstrates usage of number based padding classes.

<!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-blue w3-padding-4">
        
        <p>This is 4 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-8">
        
        <p>This is 8 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-12">
        
        <p>This is 12 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-16">
        
        <p>This is 16 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-24">
        
        <p>This is 24 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-32">
        
        <p>This is 32 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-48">
        
        <p>This is 48 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-64">
        
        <p>This is 64 pixels padding at top and bottom<p>
    </div>
    
        <div class="w3-panel w3-blue w3-padding-128">
        
        <p>This is 128 pixels padding at top and bottom<p>
    </div>

</html>

Download the code Try the code

In the above code, we have 9 panels with blue background. The 9 numbered padding classes from w3-padding-4 to w3-padding-128 have been added to each individual panel. In the output, you can see the effect of each padding class.

Apart from number based padding, you can semantic classes for defining padding. They are w3-padding class which adds 8 px top and bottom padding and 16px left and right padding. Similarly, w3-padding-tiny adds 2px top and bottom and 4px left and right padding. Similarly, w3-padding-small adds 4px top and bottom and 8px left and right padding. w3-padding-medium is same as w3-padding. w3-padding-large adds 12px top and bottom, while 24px left and right padding. w3-padding-xlarge adds 16px top and bottom, while 32px left and right padding. Similarly, w3-padding-xxlarge adds 24px top and bottom, while 48px left and right padding. Finally, w3-padding-jumbo adds 32px top and bottom, while 64px left and right padding.

Take a look at a simple example to see semantic padding classes 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-blue w3-padding-tiny">
        
        <p>This is a w3-padding-tiny padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-small">
        
        <p>This is a w3-padding-small padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-medium">
        
        <p>This is a w3-padding-medium padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-large">
        
        <p>This is a w3-padding-large padding <p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-xlarge">
        
        <p>This is a w3-padding-xlarge padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-xxlarge">
        
        <p>This is a w3-padding-xxlarge padding<p>
    </div>
    
    <div class="w3-panel w3-blue w3-padding-jumbo">
        
        <p>This is a w3-padding-jumbo padding<p>
    </div>
    
     

</html>

Download the code Try the code

<<< W3CSS RoundW3CSS Margins >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .