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.
- CSS padding-bottom Property
- CSS padding-top Property
- CSS padding-right Property
- CSS padding-left Property
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:
<!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.