Padding in CSS is a fundamental property for the front-end designing of our web applications. Padding is basically used for defining the space between the element and the border of the element. Many people believe that margin and padding are the same properties, but this conception is wrong. In CSS, margin property is basically used for defining space around the items. Background colors affect the Padding property in CSS because an area around the content gets cleared.
We can change the top, right, bottom, and left padding by using different properties in CSS though all the padding properties in all directions can be changed using direct shorthand padding property.
Now let us discuss some CSS Padding properties.
CSS Padding Properties
- padding: This property is used for setting all the padding properties in all directions just by using a single declaration.
- padding-left: This property is mainly used for defining padding in the left direction of the element.
- padding-right: This property is mainly used for defining padding in the right direction of the element.
- padding-top: This property is mainly used for defining padding in the top direction of the element.
- padding-bottom: This property is mainly used for defining padding in the bottom direction of the element.
CSS Padding Values
There are two types of padding values used in CSS.
- length that implies we can fix padding in px, pt, em etc., using this padding value.
- % : This defines padding in the percentage of the containing element.
Now let us go through an example for CSS padding:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: rgb(230, 228, 161);
}
p.padding {
padding-top: 150px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 150px;
}
</style>
</head>
<body>
<p>No padding has been applied to this paragraph.</p>
<p class="padding">Padding have been applied to this paragraph.</p>
</body>
</html>
Output:
Padding and Element Width
The CSS width property specifies the width of the content area. Generally, for a box element, the content area is the portion inside the border or margin of the element. The padding will be applied to the actual total width of the element if that element has a particular width and the result for this is often undesirable.
Let us take an example where a <div> element has a width of 200px. In that div, we are going to apply a padding of 25px.
So, the total width will be 250px (200px + 25px for left padding + 25px for right padding).
div {
width: 200px;
padding: 25px;
}
Now, if we want a fixed width for our element, we can apply the box-sizing property to the element. Using this property, the element will be able to maintain its actual width even after increasing the padding, and as a result, the available content space will decrease.
div {
width: 200px;
padding: 25px;
box-sizing: border-box;
}
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
In this article, we saw what CSS padding is and how important it is for web applications and their front end.
If you are interested in learning more about ReactJS, CSS, and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics. It is a descriptive online bootcamp that includes 25 projects, a capstone project, and interactive online classes.
Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.