Home » CSS » CSS Padding – How can we use Padding in css?

CSS Padding – How can we use Padding in css?

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.

css padding

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:-
    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

    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.
, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *


error: Sorry You Have Not Permission To Copy!