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-bottom property
The padding-bottom CSS property specifies the bottom padding of an element. It sets the space between the element's content and its bottom border. This property accepts values in length units (px, em, rem) or percentages (%).
Syntax
padding-bottom: length | percentage | initial | inherit;
Parameters
- length - Fixed value in units like px, em, rem (e.g., 10px, 1.5em)
- percentage - Relative to the width of the containing block (e.g., 5%)
- initial - Sets to default value (0)
- inherit - Inherits from parent element
Example with Different Units
<html>
<head>
<style>
.example {
border: 1px solid red;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="example" style="padding-bottom: 20px;">
This paragraph has 20px bottom padding
</p>
<p class="example" style="padding-bottom: 5%;">
This paragraph has 5% bottom padding
</p>
<p class="example" style="padding-bottom: 2em;">
This paragraph has 2em bottom padding
</p>
</body>
</html>
Visual Comparison
Common Use Cases
- Text spacing - Creating space below paragraphs and headings
- Button design - Adding padding to clickable elements
- Card layouts - Spacing content from container edges
- Form elements - Improving input field appearance
Browser Compatibility
The padding-bottom property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 4+.
Conclusion
The padding-bottom property is essential for controlling spacing between element content and its bottom border. Use length units for precise control or percentages for responsive designs.
Updated on: 2026-03-15T23:18:59+05:30
125 Views
Advertisements