Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Define Paddings for Individual Sides in CSS
CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-left properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction.
Syntax
The syntax of CSS individual padding properties is as follows −
selector {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
Method 1: Using Shorthand Padding Property
The shorthand padding property can set padding for all four sides of an element by specifying values in clockwise order: top, right, bottom, left −
Example
The following example demonstrates using shorthand padding property −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px 40px 30px 50px; /* top right bottom left */
background-color: lightblue;
border: 2px solid navy;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
This box has different padding on each side: 20px top, 40px right, 30px bottom, 50px left.
</div>
</body>
</html>
A light blue box with navy border appears, showing different amounts of space between the text and border on each side.
Method 2: Using Individual Padding Properties
You can also set padding for each side individually using separate properties −
Example
The following example sets padding individually for each side −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding-top: 25px;
padding-right: 45px;
padding-bottom: 35px;
padding-left: 15px;
background-color: lightgreen;
border: 2px solid darkgreen;
width: 250px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
This box demonstrates individual padding properties applied to each side separately.
</div>
</body>
</html>
A light green box with dark green border appears, with varying amounts of internal spacing on each side: more space on the right, moderate on top and bottom, less on the left.
Possible Values
| Value Type | Description | Example |
|---|---|---|
length |
Fixed padding using units like px, em, rem | padding-top: 20px; |
percentage |
Padding relative to parent element width | padding-left: 5%; |
inherit |
Inherits padding from parent element | padding-right: inherit; |
Conclusion
CSS provides flexible options for setting padding on individual sides using either shorthand notation or separate properties. Use shorthand for consistent patterns and individual properties when you need different values for each side.
196 Views
