Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set padding inside an element using CSS?
Padding in CSS is used to give some space around the content of the element. You can add the space around the any type of content that is contained by the element. The content can be direct text, or any other nested elements inside it. You can easily add the space you want to set between the content and the boundaries of the element. Padding is the inner space, that is set only around the content and between the boundaries and content of element.
Let us see how you can add padding inside an element around its content using CSS. There are two ways available in CSS to add the padding inside an element. You can either use the shorthand padding property of CSS or individual properties to add padding to each side.
Let us now understand both the above approaches to add padding inside the container in details with help of code examples for each approach.
Using the shorthand padding property
In this approach, you just need to use the padding property with different number of values to set padding inside the element.
Syntax
Below syntax will help you understand the use of padding property with different number of values −
padding: number_value px; // will set same padding as given to all sides. padding: number_value1 px number_value2 px; // will set forst value as top and bottom padding, while second as left and right. padding: number_value1 px number_value2 px number_value3 px; // will set first value as top padding, second as left and right and third as bottom padding. padding: number_value1 px number_value2 px number_value3 px number_value4 px; // will set all four values to all four different sides in order top -> right -> bottom -> left respectively.
Let us now implement this approach practically and set the padding inside an element using padding property with different number of values as discussed in syntax.
Steps
Step 1 − In the first step, we will define a wrapper element that contains all other inside it.
Step 2 − In the next step, we will define different elements to set padding property with different number of values around their content.
Step 3 − In the final step, we will define inner containers inside the elements created in last step that contains some text content and we will set the padding around those inner elements using padding property on their parent.
Example
The below example will explain you the use of the padding property with different values and how it behaves with those values −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 10px 20px 10px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 25px 15px 5px 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<p><strong> Container with one single padding value for all sides </strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class = "container-2">
<div class = "inner-container">
<p><strong> Container with two values for the padding property </strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class = "container-3">
<div class = "inner-container">
<p><strong> Container with three values for the padding property </strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class = "container-4">
<div class = "inner-container">
<p><strong> Container with four values for the padding property </strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
</div>
</center>
</body>
</html>
In the above example, we have used the shorthand padding property to set the padding inside an element around its content. We have used padding property with different number of values and see the behaviour of it with each one of them.
Let us now understand the second approach of using individual property to set padding inside an element.
Using the individual padding property
We can set the padding inside an element using the individual padding property for each side define by their names as shown in below syntax.
Syntax
This syntax will show you how to use the different padding property for every side to set different padding −
padding-top: number_value px; padding-bottom: number_value px; padding-left: number_value px; padding-right: number_value px;
Let us now understand the practical implementation of setting the padding inside an element using this approach as well.
Approach
The approach of this example is almost similar to the above example. You just need to replace the padding shorthand property with individual property approach and reduce the number of elements as well.
Example
The below example will illustrate the changes in the code as discussed in the algorithm to use the individual property approach −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding-top: 30px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<p><strong>Container with one single padding value for all sides</strong> </p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class = "container-2">
<div class = "inner-container">
<p><strong>Container with two values for the padding property</strong></p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
</div>
</center>
</body>
</html>
In this example, we have used the indivudual padding property approach to set the padding inside the elemnt around the inner container that contains the text content.
Conclusion
In this article, we have learned about the two different approaches to set the padding inside an element using CSS. We have discussed and understand both the approaches in details by practically implementing them with help of different code examples for each one of them.
51 Views
