Open In App

How to set padding inside an element using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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. 


Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads