The CSS padding property is used to create space between the content of an element and its border. Padding adds space inside the border, making the content within an element more readable and visually separated from its edge. Unlike margins, which affect the space around the element, padding affects the space within the element's border and is influenced by background colors.
1.padding: This shorthand property sets the padding for all four sides of an element (top, right, bottom, left) in one declaration.
padding: 10px; /* Applies 10px padding to all four sides */
2.padding-left: Specifies the padding on the left side of the element.
padding-left: 15px; /* Applies 15px padding to the left side */
3.padding-right: Specifies the padding on the right side of the element.
padding-right: 20px; /* Applies 20px padding to the right side */
4.padding-top: Specifies the padding on the top side of the element.
padding-top: 25px; /* Applies 25px padding to the top side */
5.padding-bottom: Specifies the padding on the bottom side of the element.
padding-bottom: 30px; /* Applies 30px padding to the bottom side */
1. Length Values: Padding can be set using fixed units like px, em, rem, pt, etc.
padding: 10px; /* 10 pixels of padding on all sides */
2 . Percentage: Padding can also be set as a percentage, which is relative to the width of the containing element.
padding: 5%; /* 5% padding on all sides relative to the width of the container */
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding Example</title>
</head>
<body>
<!-- Padding applied to all sides -->
<div style="background-color: lightcoral; padding: 10px;">
Padding: 10px on all sides
</div>
<!-- Different padding for each side -->
<div style="background-color: lightgreen; padding: 20px 30px 40px 50px;">
Padding: 20px (Top), 30px (Right), 40px (Bottom), 50px (Left)
</div>
<!-- Padding with percentage -->
<div style="background-color: lightblue; padding: 5%;">
Padding: 5% relative to the width of the container
</div>
<!-- Fixed padding units -->
<div style="background-color: lightyellow; padding: 1em;">
Padding: 1em on all sides
</div>
</body>
</html>