CSS – Padding

Learn about CSS Padding.  It shows the space between the content of an element and its border. It has options such as padding-top, padding-bottom, padding-right, and padding-left to set margins for top, bottom, right, and left respectively.

The below figure explains wherein margin, padding, and border get placed around a content:

CSS Padding

Let us see how to set padding on a web page around content.

CSS padding-top property (Set Top Padding)

To set the top padding of an element on a web page, use the padding-top property in CSS. Let us see an example and set the top padding:

Output

CSS Top Padding

CSS padding-bottom property (Set Bottom Padding)

To set the bottom padding of an element on a web page, use the padding-bottom property in CSS. Let us see an example and set the bottom padding:

Output

CSS Bottom Padding

CSS padding-left property (Set Left Padding)

To set the left padding of an element on a web page, use the padding-left property in CSS. Let us see an example and set the left padding:

Output

CSS Left Padding

CSS padding-right property (Set Right Padding)

To set the right padding of an element on a web page, use the padding-right property in CSS. To explain the concept, we have specified the right padding for the <p> to %  of the width of the containing element.

Let us see an example and set the right padding:

Output

CSS Right Padding

If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.


Read More:

CSS - Margins
CSS - 3D Transform
Studyopedia Editorial Staff
contact@studyopedia.com

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading