For working professionals
For fresh graduates
Study abroad
More

Padding in CSS

Updated on 03/03/20242,005 Views

Table of Content

Introduction

In this tutorial, we delve deep into one of the critical components of CSS - padding. We will examine its roles, its significance in creating effective layouts, and the best practices to harness this in your web design practices skillfully.

Overview

In the realm of web design, padding in CSS holds an instrumental role in structuring and fine-tuning the layout. It defines the spacing around an element's content, directly influencing the positioning and appearance of elements on a web page. Gaining a thorough understanding of padding and how it interacts with other CSS properties is an essential stepping stone in mastering web design.

What is Padding in CSS?

Padding in CSS refers to the space that surrounds the content inside an element. This space does not include the border or margin but strictly lies between the content and the border, impacting the overall element dimensions.

Why Should You Use CSS Padding?

Padding's primary use in CSS is to create space around an element's content, enhancing the visual separation between the content and its border. This extra space effectively breaks the monotony, making the design more readable and visually pleasing, thus improving the overall user experience.

Properties of CSS Padding

The padding of an element is the space between the content and its border. This property can contain from one to four values:

Property	Description
padding-left	Used to set the left padding of a specific element.
padding-right	Used to set the right padding of a specific element.
padding-top	Used to set the top padding of a specific element.
padding-bottom	Used to set the bottom padding of a specific element.

Here is an example:

Code:

<!--top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20px-->

<!DOCTYPE html>
<html>
<head>
<style>
p.upGradpadding {
  border: 1px solid red; 
  padding:10px 5px 15px 20px; 
}
</style>
</head>
<body>

<h1>The padding-top,The padding-right,The padding-bottom,The padding-left Property</h1>

<p class="upGradpadding">A paragraph with a 10px top,5px right,15px bottom and 20px left padding</p>

</body>
</html>

Explanation:

The CSS style defines a class selector p.upGradpadding, which targets <p> (paragraph) elements with the class name upGradpadding. Inside the p.upGradpadding CSS block, the following properties are defined:

border: 1px solid red: This adds a red border of 1px thickness around the paragraph to make the padding visually distinct.
padding: 10px 5px 15px 20px: This sets different padding values for each side in the order of top, right, bottom, and left. The values are 10px for top, 5px for right, 15px for bottom, and 20px for left.

The paragraph element with the class upGradpadding is defined as follows: <p class="upGradpadding">A paragraph with a 10px top, 5px right, 15px bottom, and 20px left padding</p>

Visually, the paragraph will be displayed with padding as follows:

The top padding will be 10px, creating space between the top edge of the paragraph and its content.
The right padding will be 5px, creating space between the right edge of the paragraph and its content.
The bottom padding will be 15px, creating space between the bottom edge of the paragraph and its content.
The left padding will be 20px, creating space between the left edge of the paragraph and its content.

As a result, the content of the paragraph will be pushed away from each side of the paragraph by the specified padding values, and a red border will surround the entire paragraph.

CSS Padding Values

length - Used to define the fixed padding in pt, px, em, etc.
% - Used to define padding in % containing elements.
inherit - specifies that the padding should be inherited from the parent element.

Note: Negative values are not allowed.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 20% 3em 30px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 20%, a bottom padding of 3em,and a left padding of 30px.</div>

</body>
</html>

Explanation:

The CSS style applies to all <div> elements on the page. Inside the <style> block, the following properties are defined for the <div> element:

border: 1px solid black: This adds a black border of 1px thickness around the div to make the padding visually distinct.
padding: 25px 20% 3em 30px: This sets different padding values for each side in the order of top, right, bottom, and left.
- 25px for top padding: The div will have 25 pixels of space between the top edge of the div and its content.
- 20% for right padding: The div will have a right padding that is 20% of the div's container width. The percentage value refers to the width of the container (parent) element.
- 3em for bottom padding: The div will have a bottom padding that is 3 times the size of the "em" unit. The "em" unit is a relative unit based on the font size of the element.
- 30px for left padding: The div will have 30 pixels of space between the left edge of the div and its content.

The content of the <div> element is "This div element has a top padding of 25px, a right padding of 20%, a bottom padding of 3em, and a left padding of 30px."

Visually, the <div> element will be displayed as follows:

The top padding will be 25px, creating space between the top edge of the <div> and its content.
The right padding will be 20% of the container width, creating space between the right edge of the <div> and its content.
The bottom padding will be 3 times the size of the "em" unit, creating space between the bottom edge of the <div> and its content.
The left padding will be 30px, creating space between the left edge of the <div> and its content.

Additionally, the <div> element will have a light blue background color due to the background-color: lightblue; property.

Examples of CSS Padding

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: pink;
  padding-top: 50px;
  padding-right: 100px;
  padding-bottom: 35px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 100px,
a bottom padding of 35px,and a left padding of 80px.</div>

</body>
</html>

Explanation:

The CSS style applies to all <div> elements on the page.

Inside the <style> block, the following properties are defined for the <div> element:

border: 1px solid black: This adds a black border of 1px thickness around the div to make the padding visually distinct.
background-color: pink: This sets the background color of the <div> to pink.
padding-top: 50px: This sets a top padding of 50 pixels, creating space between the top edge of the <div> and its content.
padding-right: 100px: This sets a right padding of 100 pixels, creating space between the right edge of the <div> and its content.
padding-bottom: 35px: This sets a bottom padding of 35 pixels, creating space between the bottom edge of the <div> and its content.
padding-left: 80px: This sets a left padding of 80 pixels, creating space between the left edge of the <div> and its content.

The content of the <div> element is "This div element has a top padding of 50px, a right padding of 100px, a bottom padding of 35px, and a left padding of 80px."

Visually, the <div> element will be displayed as follows:

The top padding will be 50px, creating space between the top edge of the <div> and its content.
The right padding will be 100px, creating space between the right edge of the <div> and its content.
The bottom padding will be 35px, creating space between the bottom edge of the <div> and its content.
The left padding will be 80px, creating space between the left edge of the <div> and its content.

Additionally, the <div> element will have a pink background color due to the background-color: pink; property. The black border, as specified by border: 1px solid black;, will surround the entire <div> element, making the padding visually distinguishable from the background.

Another Example of CSS Padding

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: green;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing in upGradTutorial</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

Advantages of CSS Padding

Employing CSS padding offers numerous advantages.

Control Spacing: It provides you with the ability to control the spacing around the content of an element, thus enhancing the layout's appearance and readability. Padding creates a buffer, offering a visually pleasing separation between the content and its border.
Improve Responsiveness: Using padding improves the responsiveness of web designs. You can adjust the padding to ensure elements and text look good on different screen sizes, which is crucial in today's multi-device world. By manipulating the padding, you can create designs that scale effectively, maintaining consistency across a variety of display sizes.
Design Esthetics: Padding gives your design a breathing space, making it look less cluttered. A well-padded design allows users to focus on the content better, enhancing user experience. Hence, mastering padding can significantly uplift your overall web design approach, leading to higher user engagement and satisfaction.

Conclusion

The ability to understand and apply CSS padding is a fundamental skill for every web designer or developer. It provides you with significant control over the layout and appearance of a webpage, thus directly contributing to an enhanced user experience and readability. By mastering CSS padding, you can ensure that your designs are not just visually appealing but also highly responsive, catering to a broad spectrum of screen sizes.

Remember, creating a well-designed webpage is about striking a balance between its content, layout, and user experience, and CSS padding plays an instrumental role in achieving this equilibrium. To learn more about padding in CSS and other aspects of CSS, check out certifiable and industry-relevant courses from upGrad.

FAQs

How are padding and margin in CSS different from each other?

Padding refers to the space between an element's content and its border, while margin in CSS is the space outside the border. Both can impact the overall layout and design of a webpage.

How does CSS padding shorthand work?

CSS padding shorthand allows you to set padding for all four sides of an element in a single line of code. The order is top, right, bottom, and left.

Can padding be applied to HTML elements?

Yes, padding can be applied to HTML elements using CSS to control the spacing around the content of these elements.

How is padding-top and html padding-left in CSS different from each other?

padding-top applies padding to the top side of an element, while html padding-left applies padding to the left side. They help in controlling the spacing around the content in different directions.