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
Selected Reading
How to set padding inside an element using CSS?
Padding in CSS creates space between an element's content and its border. This inner spacing helps improve readability and visual appeal by preventing content from touching the element's edges directly.
Syntax
/* Shorthand property */ padding: value; padding: top-bottom left-right; padding: top left-right bottom; padding: top right bottom left; /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value;
Possible Values
| Value Type | Description | Example |
|---|---|---|
| Length | Fixed units like px, em, rem |
10px, 1.5em
|
| Percentage | Relative to parent element's width |
5%, 10%
|
| auto | Browser calculates padding | auto |
Method 1: Using Shorthand Padding Property
The shorthand padding property allows you to set padding for all sides using 1-4 values
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
margin: 20px 0;
}
.box {
width: 150px;
background-color: #e3f2fd;
border: 2px solid #2196F3;
text-align: center;
}
.one-value { padding: 20px; }
.two-values { padding: 15px 25px; }
.three-values { padding: 10px 20px 30px; }
.four-values { padding: 5px 15px 25px 35px; }
.content {
background-color: #fff3e0;
border: 1px solid #ff9800;
}
</style>
</head>
<body>
<h3>Shorthand Padding Examples</h3>
<div class="container">
<div class="box one-value">
<div class="content">20px all sides</div>
</div>
<div class="box two-values">
<div class="content">15px top/bottom, 25px left/right</div>
</div>
</div>
<div class="container">
<div class="box three-values">
<div class="content">10px top, 20px left/right, 30px bottom</div>
</div>
<div class="box four-values">
<div class="content">5px top, 15px right, 25px bottom, 35px left</div>
</div>
</div>
</body>
</html>
Four blue boxes with orange inner content areas demonstrate different padding values. The spacing between the blue border and orange content varies based on the padding applied.
Method 2: Using Individual Padding Properties
Individual properties give you precise control over each side's padding
<!DOCTYPE html>
<html>
<head>
<style>
.individual-box {
width: 200px;
margin: 20px auto;
background-color: #f3e5f5;
border: 2px solid #9c27b0;
}
.custom-padding {
padding-top: 30px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 40px;
}
.content-area {
background-color: #e8f5e8;
border: 1px solid #4caf50;
padding: 10px;
}
</style>
</head>
<body>
<div class="individual-box custom-padding">
<div class="content-area">
<h4>Custom Padding</h4>
<p>Top: 30px<br>Right: 15px<br>Bottom: 10px<br>Left: 40px</p>
</div>
</div>
</body>
</html>
A purple box with green inner content shows asymmetric padding - more space on top and left, less on right and bottom.
Key Points
- Padding creates space inside the element, between content and border
- Shorthand notation follows clockwise order: top, right, bottom, left
- Individual properties offer more precise control
- Padding values cannot be negative (unlike margins)
Conclusion
CSS padding creates essential breathing room around content. Use shorthand for uniform spacing or individual properties for asymmetric layouts. Both methods help create visually appealing and readable designs.
Updated on: 2026-03-15T18:02:46+05:30
812 Views
Advertisements