CSS padding-bottom Property
An element’s padding is the space between its content and its border. The padding-bottom CSS property is used to set the height of the padding area on the bottom of an element.
Syntax:
padding-bottom: length|percentage;
Property values:
- length: This value is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
Syntax:
padding-bottom: length;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS padding-bottom Property</
title
>
<
style
>
p.geek {
padding-bottom: 35px;
color: white;
background: green;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h1
style
=
"color: green;"
>GeeksforGeeks</
h1
>
<
h2
>padding-bottom Property</
h2
>
<!-- Below paragraph element has a
padding-bottom of 35px -->
<
p
class
=
"geek"
>
This paragraph has a padding-bottom: 35px;
</
p
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- percentage: This type of value is used to specify the bottom padding in percent of the width of the element. It must be non-negative.
Syntax:
padding-bottom: percentage;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS padding-bottom Property</
title
>
<
style
>
p.geek {
padding-bottom: 10%;
color: white;
background: green;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h1
style
=
"color: green;"
>GeeksforGeeks</
h1
>
<
h2
>padding-bottom Property</
h2
>
<!-- Below Paragraph element has a
padding-bottom of 10% -->
<
p
class
=
"geek"
>
This paragraph has a padding-bottom: 10%;
</
p
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Supported Browsers: The browser supported by padding-bottom property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0