Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY JAVA MORE FORUM EXERCISES REFERENCES

W3.CSS Padding

❮ Previous Next ❯

w3-padding-large

I have 12px top and bottom padding and 24px left and right padding.

W3.CSS Padding Number Classes

The w3-padding-number classes add top and bottom padding to any HTML element:

Class Defines
w3-padding-16 Adds 16px top and bottom padding to an element
w3-padding-24 Adds 24px top and bottom padding to an element
w3-padding-32 Adds 32px top and bottom padding to an element
w3-padding-48 Adds 48px top and bottom padding to an element
w3-padding-64 Adds 64px top and bottom padding to an element

Examples:

w3-padding-16

I have 16px top and bottom padding

w3-padding-24

I have 24px top and bottom padding

w3-padding-32

I have 32px top and bottom padding

w3-padding-48

I have 48px top and bottom padding

w3-padding-64

I have 64px top and bottom padding

Example

<div class="w3-panel w3-padding-16">
  <p>I have 16px top and bottom padding.</p>
</div>
Try It Yourself »

W3.CSS Padding Size Classes

The w3-padding-size classes add top, bottom, right, and left padding to any HTML element:

Class Defines
w3-padding Adds 8px top and bottom, and 16px left and right padding
w3-padding-small Adds 4px top and bottom, and 8px left and right padding
w3-padding-large Adds 12px top and bottom, and 24px left and right padding

Examples:

w3-padding-small

I have 4px top and bottom padding and 8px left and right padding.

w3-padding

I have 8px top and bottom padding and 16px left and right padding.

w3-padding-large

I have 12px top and bottom padding and 24px left and right padding.

Example

<div class="w3-panel w3-padding-large">
  <p>I have 12px top and bottom padding and 24px left and right padding.</p>
</div>
Try It Yourself »

❮ Previous Next ❯