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-left property
The CSS padding-left property sets the amount of space between an element's content and its left border. This property affects the inner spacing on the left side of an element.
Syntax
selector {
padding-left: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Specifies padding in px, em, rem, etc. |
% |
Specifies padding as a percentage of the containing element's width |
initial |
Sets the property to its default value (0) |
inherit |
Inherits the value from the parent element |
Example: Left Padding with Different Units
The following example demonstrates padding-left using both pixel and percentage values −
<!DOCTYPE html>
<html>
<head>
<style>
.pixel-padding {
padding-left: 30px;
border: 2px solid #007bff;
margin-bottom: 10px;
background-color: #f8f9fa;
}
.percent-padding {
padding-left: 15%;
border: 2px solid #28a745;
background-color: #e9f7ef;
}
</style>
</head>
<body>
<p class="pixel-padding">
This paragraph has 30px left padding. Notice the space between this text and the left border.
</p>
<p class="percent-padding">
This paragraph has 15% left padding relative to its container width.
</p>
</body>
</html>
Two paragraphs appear: The first with a blue border has 30px of space between the text and left border. The second with a green border has 15% left padding, creating proportional spacing based on container width.
Conclusion
The padding-left property is essential for controlling the left inner spacing of elements. Use pixel values for fixed spacing or percentage values for responsive layouts that adapt to container width.
Updated on: 2026-03-15T11:19:43+05:30
121 Views
Advertisements