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-top property
The padding-top CSS property specifies the top padding of an element. It creates space between the element's content and its top border. This property accepts values in pixels, percentages, em units, or other CSS length units.
Syntax
padding-top: value;
Values
The padding-top property accepts the following values:
- Length values: px, em, rem, cm, etc.
- Percentage: Relative to the width of the containing block
- inherit: Inherits from parent element
- initial: Sets to default value (0)
Example with Length Values
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
padding-top: 20px;
border: 2px solid blue;
background-color: lightblue;
margin: 10px 0;
}
.example2 {
padding-top: 2em;
border: 2px solid green;
background-color: lightgreen;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="example1">This paragraph has 20px top padding</p>
<p class="example2">This paragraph has 2em top padding</p>
</body>
</html>
Example with Percentage Values
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid black;
}
.percent-padding {
padding-top: 10%;
border: 1px solid red;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="container">
<p class="percent-padding">This paragraph has 10% top padding (relative to container width)</p>
</div>
</body>
</html>
Comparison of Values
| Value Type | Example | Description |
|---|---|---|
| Pixels | padding-top: 15px; |
Fixed spacing in pixels |
| Em units | padding-top: 1.5em; |
Relative to element's font size |
| Percentage | padding-top: 5%; |
Relative to parent's width |
| Zero | padding-top: 0; |
No top padding |
Practical Use Cases
The padding-top property is commonly used for:
- Creating vertical spacing in navigation menus
- Adding breathing room to text content
- Positioning elements within containers
- Creating responsive layouts with percentage values
Conclusion
The padding-top property is essential for controlling vertical spacing in CSS layouts. Use pixel values for precise control or percentages for responsive designs that adapt to container sizes.
Updated on: 2026-03-15T23:18:59+05:30
118 Views
Advertisements