CSS Padding

The CSS padding properties are used to generate space around content.The padding clears an area around the content (inside the border) of an element.

Individual Sides in padding:-

CSS has properties for specifying the padding for each side of an element are as follows:-

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

All the padding properties can have the following values:-

1. length - specifies a padding in px
2. % - specifies a padding in %
3. inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all sides of a <p> element:-

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;}

Shorthand Property:-

To shorten the code, it is possible to specify all the padding properties in one property.The padding property is a shorthand property for the following individual padding properties:

padding-top padding-right padding-bottom padding-left

Example:-

p {
    padding: 50px 30px 50px 80px;}

All CSS Padding Properties:-

Property	Description
padding	A shorthand property for setting all the padding properties in one declaration
padding-bottom	Sets the bottom padding of an element
padding-left	Sets the left padding of an element
padding-right	Sets the right padding of an element
padding-top	Sets the top padding of an element

IF you have any question about this lecture you can comment blow. feel free to contact me.