About Lesson
Definition:
In CSS, the padding
property is used to set the padding area for all four sides of an element. Padding is the space between the content of an element and its border.
Syntax:
selector {
padding: top right bottom left;
}
top
,right
,bottom
, andleft
are optional values that represent the padding on each side of the element. They can be specified in various units, such as pixels (px
), em, rem, percentages, etc.
If you provide one value, it sets the padding for all sides. If you provide two values, the first value sets the top and bottom padding, and the second value sets the right and left padding. If you provide three values, the first value sets the top padding, the second sets the right and left padding, and the third sets the bottom padding. If you provide four values, they set the top, right, bottom, and left padding individually.
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><style>/* Set padding for a div with the class ‘box’ */.box {width: 200px;background-color: lightblue;border: 2px solid navy;/* Padding shorthand property: padding: top right bottom left; */padding: 20px 10px 30px 15px;margin: 20px;}/* Set padding for a paragraph inside the div */.box p {padding: 10px;}</style><title>Padding Example</title></head><body><div class=”box”><p>This is a box with specified padding.</p></div></body></html>