Skip to content
Related Articles

Related Articles

Improve Article

How to set padding inside an element using CSS?

  • Last Updated : 17 Mar, 2021

In this article we are going to see how to set padding inside an element using CSS. Padding is considered as the space between content and its border. The padding creates space inside defined borders. The difference between padding and margin is that margin creates space outside borders and padding creates space for content inside the border (the border is just any tag having its area assigned to it).

We can use the below properties to set the padding inside an element.

Syntax:

/* Set padding to all sides
   padding: numberpx;

/* Set padding to specific side
   padding-top: numberpx;
   padding-right: numberpx;
   padding-left: numberpx;
   padding-bottom: numberpx;

Approach: We will create a button tag having padding set to its various sides using padding property in CSS. Below is the code that illustrates the use of padding.

Example:



HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <style>
    button{
      padding-top: 10px;
      padding-bottom: 20px;
      padding-right: 30px;
      padding-left: 40px;
    }
</style>
</head>
  
<body>
    <button>
      GeeksforGeeks
    </button>
</body>
  
</html>


Output:

Explanation: Here we created a button and then used CSS to change its padding property from each side differently. 

My Personal Notes arrow_drop_up
Recommended Articles
Page :