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
CSS padding property
The padding property sets the internal space between an element's content and its border. It creates space inside the element on all four sides: top, right, bottom, and left.
Syntax
padding: value; padding: top-bottom left-right; padding: top left-right bottom; padding: top right bottom left;
Padding Values
The padding property accepts various units:
- px - Fixed pixels
- % - Percentage of parent element's width
- em/rem - Relative to font size
- auto - Browser calculates automatically
Examples
Single Value (All Sides)
<html>
<head>
<style>
.single-padding {
padding: 25px;
border: 2px solid orange;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="single-padding">
All four sides have 25px padding
</p>
</body>
</html>
Two Values (Vertical and Horizontal)
<html>
<head>
<style>
.two-values {
padding: 20px 4%;
border: 2px solid red;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="two-values">
Top and bottom: 20px, Left and right: 4% of parent width
</p>
</body>
</html>
Three Values (Top, Horizontal, Bottom)
<html>
<head>
<style>
.three-values {
padding: 15px 3% 10px;
border: 1px solid maroon;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="three-values">
Top: 15px, Left and right: 3%, Bottom: 10px
</p>
</body>
</html>
Individual Padding Properties
<html>
<head>
<style>
.individual-padding {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 5px;
border: 2px solid blue;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<p class="individual-padding">
Each side has different padding values
</p>
</body>
</html>
Padding vs Margin
Key Points
- Padding increases the element's total size
- Background colors extend into padding area
- Padding cannot be negative (unlike margin)
- Percentage values are based on parent element's width
Conclusion
The CSS padding property creates internal spacing within elements. Use single values for uniform padding, or multiple values to control each side individually for precise layout control.
Updated on: 2026-03-15T23:18:59+05:30
219 Views
Advertisements