The padding properties specify the space between the border and content.

The top, right, bottom and left padding can be changed independently using seperate properties. A shorthand padding property is also created to control multiple sides at once.

Padding Properties

The possible properties can be used for padding are as follows:

padding-topIt specifies the top padding of an element.
padding-bottomIt specifies the bottom padding of an element.
padding-rightIt specifies the right padding of an element.
padding-leftIt specifies the left padding of an element.
paddingIt acts as a shorthand for the preceding properties.

Padding Example

Below examples will demonstrate the basic architecture of padding

Basic Syntax:

<!doctype html>  
       <div style="background-color: green;">
         <p style="background-color: yellow; padding: 5%;">Learn CSS with PHPDocs community</p>