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:

Value Description
padding-top It specifies the top padding of an element.
padding-bottom It specifies the bottom padding of an element.
padding-right It specifies the right padding of an element.
padding-left It specifies the left padding of an element.
padding It acts as a shorthand for the preceding properties.

Padding Example

Below examples will demonstrate the basic architecture of padding

Basic Syntax:
p{ padding-top: 5%; }


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>