CSS
Padding

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:

ValueDescription
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:
Example:

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