Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Padding Around an Element Using CSS
The padding property in CSS is used to set the inner space between the content and the boundaries of the container. The space defined using the padding property will be set around the content of the container not around the container itself. It will set the space inside the container not outside it.
Let us see the different ways or methods of applying the padding around an element using CSS.
There are two ways in which we can set padding around the content of an element using CSS as listed below
Using the individual padding property for each side.
Using the shorthand padding property for all sides.
Let us understand the above approaches to apply the padding property in CSS with help of individual code examples.
Using individual properties for each side
In this approach or method, we will use the individual padding property to define and applying the padding around an element. The individual properties will apply the padding only to the particular side of the element.
Syntax
The below syntax will show how you can use the individual padding property for each side of container
padding-top: padding top value padding-bottom: padding bottom value padding-left: padding left value padding-right: padding right value
Let us now understand the use of the individual padding properties to define and apply the different padding around the content of a container.
Algorithm
Step 1 In the first step, we will define two different HTML elements to see the use of the individual padding properties.
Step 2 In the next step, we will apply the individual padding properties with same values to one element and with different values to another.
Step 3 In the last step, we will give border to the both the elements and see the gap between the content and the boundaries of the container.
Example
The below example will explain how you can apply padding around the content of the element using individual padding property in CSS
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 20px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-right: 10px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the individual CSS properties.</h3>
<div class = "main-container">
<div class = "container-1">
<p><strong>Container with different padding values for different 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 class = "container-2">
<p><strong>Container with same padding values 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>
</center>
</body>
</html>
In the above example, we have used the individual padding CSS proeprties with different values and same values on two different containers to see the implementation of these proeprties to assign different padding to different sides and same padding to all sides of the element.
Using the shorthand padding property for all sides
The shorthand property to apply the padding around all the sides of the element we can use the padding. It will set the padding around all the sides of the content. This shorthand property can be used in four different ways that are shown below.
Using one single value The shorthand padding property can be used with only one value. The padding around all the sides of the container content will be set to that particular value.
Syntax
padding: padding_value; // it will set the same padding around all sides.
Using two values You can also use the padding property with two values. It will set the first value as the top and bottom padding and the later one as the left and right padding with the same values.
Syntax
padding: top/bottom_padding_value left/right_padding_value;
Using three values If you are using the shorthand property with three values, the it will set the first value as top padding, second value as left and right padding and the third value as the bottom padding.
Syntax
padding: top_padding left/right_padding bottom_padding
Using four values The padding property when used with four values, the it will assign the values to different all sides of the container. The first vale is corresponding to top padding, second to right, third to bottom and fourth to let padding value.
Syntax
padding: top right bottom left
Let us now implement the padding property with all above syntaxes and understand it in detail practically with help of code example.
Algorithm
The algorithm of this example is almost similar to the previous example. You just need to add two more elements to the HTML document and apply the padding to all sides of those elements using the above syntaxes.
Example
The example below will illustrate the use of shorthand padding property with different number of values as written above
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 15px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px 15px 30px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px 30px 5px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the shorthand padding CSS property.</h3>
<div class = "main-container">
<div class = "container-1">
<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 class = "container-2">
<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 class = "container-3">
<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 class = "container-4">
<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>
</center>
</body>
</html>
In the above example, we have used the padding property with different number of values and even with the different values to apply the different padding to each sides of the container element to see difference between using the padding property with any number of values but not beyond four and not below one.
Conclusion
In this article, we have learned about the padding property in CSS and understand it in different use cases with the help of code exmples for each use case. We have discussed about the individual as well as the shorthand padding properties and understand them in details by implementing them practically with thelp of code examples.
117 Views
