Padding helps us to create space around the elements. Each side of an element can be padded using CSS properties: padding-top padding-right, padding-left, and padding-bottom.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Here’s how padding property should be coded in CSS:

Padding can be implemented using one, two, three, or four values. The value can be a pixel or percentage. However, negative values are not allowed in padding.

  • Padding property with one value: It means that all the four sides of the element will have same padding, and it should be codes as below:

    padding: 35px;

  • Padding with two values: The first value denotes the top & bottom paddings, and the second value denotes the right and left paddings.

    padding: 35px 50px;

  • Padding with three values: The first value is for top padding, second value is for right and left paddings, and the third value denotes the bottom padding.

    padding: 40px 60px 25px;

  • Padding with four values: Each value takes each side of the element.

    Padding: 50px 45px 40px 30px;

Top padding is 50px, right padding is 45px, bottom padding is 75px, and left padding is 100px


<!DOCTYPE html> <html> <html lang="en-US"> <style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } </style> </head> <body> <h2>Knowledge2life</h2> <div>Online learning website.</div> </body> </html>



Online learning website.